← Back to documentation

Menu bar

A simple customizable menu bar that can be used at the top of the page.

Information

Plan: Personal

Properties

PropertyTypeDefault
Title
string
"Lorem ipsum"
Icon image alt
string
""
Icon image src
string
""
Icon (letter)
string
"L"
Links
{
  "items": {
    "props": {
      "href": {
        "type": "string"
      },
      "items": {
        "items": {
          "props": {
            "href": {
              "type": "string"
            },
            "label": {
              "type": "string"
            },
            "theme": {
              "type": "string"
            },
            "type": {
              "type": "string"
            }
          },
          "type": "object"
        },
        "type": "array"
      },
      "label": {
        "type": "string"
      },
      "theme": {
        "type": "string"
      },
      "type": {
        "type": "string"
      }
    },
    "type": "object"
  },
  "type": "array"
}
[
  {
    "items": [
      {
        "href": "/",
        "items": [],
        "label": "Maecenas sagittis",
        "type": "link"
      },
      {
        "href": "/",
        "items": [],
        "label": "Morbi ac orci",
        "type": "link"
      },
      {
        "href": "/",
        "items": [],
        "label": "Cras ac dolor",
        "type": "link"
      }
    ],
    "label": "Lorem ipsum"
  },
  {
    "items": [],
    "label": "Suspendisse"
  },
  {
    "items": [],
    "label": "Aenean consectetur"
  }
]
Background color
string
"var(--pc-semantic-surface-overlay)"
Background image
string
"none"
Backdrop filter
string
"blur(8px)"
Border color
string
"var(--pc-semantic-border-default)"
Background color - Icon (letter)
string
"var(--pc-semantic-interactive-primary)"
Color - Icon (letter)
string
"var(--pc-semantic-text-inverse)"
Color - Item
string
"var(--pc-semantic-text-secondary)"
Color - Item - Hover
string
"var(--pc-semantic-text-primary)"
Background color - Item - Primary
string
"var(--pc-semantic-interactive-primary)"
Background color - Item - Primary - Hover
string
"var(--pc-semantic-interactive-primary-hover)"
Color - Item - Primary
string
"var(--pc-semantic-text-inverse)"
Color - Item - Primary - Hover
string
"var(--pc-semantic-text-inverse)"
Background color - Line - Hover
string
"var(--pc-semantic-interactive-primary)"
Background color - Submenu
string
"var(--pc-semantic-surface-base)"
Background color - Submenu - Item - Hover
string
"var(--pc-semantic-surface-primary)"
Background color - Submenu - Item - Primary
string
"var(--pc-semantic-interactive-primary)"
Background color - Submenu - Item - Primary - Hover
string
"var(--pc-semantic-interactive-primary-hover)"
Color - Submenu - Item
string
"var(--pc-semantic-text-secondary)"
Color - Submenu - Item - Hover
string
"var(--pc-semantic-text-primary)"
Color - Submenu - Item - Primary
string
"var(--pc-semantic-text-inverse)"
Color - Submenu - Item - Primary - Hover
string
"var(--pc-semantic-text-inverse)"
Background color - Mobile
string
"var(--pc-semantic-surface-base)"
Background image - Mobile
string
"none"
Color
string
"var(--pc-semantic-text-primary)"
Color - Hover
string
"var(--pc-semantic-text-primary)"
Position
enum<string>
"relative"
Top
string
"auto"
Selectors
array
[]

Variants

VariantDescription
Glass - BlueComing soon...