← Back to documentation

Side bar

Coming soon...

Information

Plan: Personal

Properties

PropertyTypeDefault
Links
{
  "items": {
    "props": {
      "href": {
        "type": "string"
      },
      "isActive": {
        "type": "boolean"
      },
      "label": {
        "type": "string"
      }
    },
    "type": "object"
  },
  "type": "array"
}
[
  {
    "href": "/",
    "isActive": true,
    "label": "Lorem ipsum"
  },
  {
    "href": "/",
    "isActive": false,
    "label": "Suspendisse"
  },
  {
    "href": "/",
    "isActive": false,
    "label": "Aenean consectetur"
  }
]
Background color
string
"var(--pc-semantic-surface-overlay)"
Backdrop filter
string
"blur(8px)"
Border color
string
"var(--pc-semantic-border-default)"
Color - Item
string
"var(--pc-semantic-text-secondary)"
Color - Item - Active
string
"var(--pc-semantic-text-inverse)"
Color - Item - Active - Hover
string
"var(--pc-semantic-text-inverse)"
Color - Item - Hover
string
"var(--pc-semantic-interactive-primary)"
Background color - Item
string
"transparent"
Background color - Item - Active
string
"var(--pc-semantic-interactive-primary)"
Background color - Item - Active - Hover
string
"var(--pc-semantic-interactive-primary-hover)"
Background color - Item - Hover
string
"var(--pc-semantic-surface-primary)"
Selectors
array
[]