OPERATOR

Sidebar

Anatomy

Active item

Many items

In a host of bounded height, the sections scroll in place between the logo and the footer, which stay put. Tab moves through the items and the list scrolls to the focused one; on touch, swipe the list. A long name wraps and its row grows.

Button items

Omit href to render a <button> for in-app actions.

Props

PROPTYPEDEFAULTREQUIRED
PROPTYPEDEFAULTREQUIRED
labelstring—no
PROPTYPEDEFAULTREQUIRED
activebooleanfalseno
hrefstring—no
asChildbooleanfalseno

Accessibility

  • Named navigation landmark; active items expose aria-current="page".
  • Inside an AppShell's navigation the rail adds no second landmark: the shell's navigation, named for the workspace, is the only one, so a screen reader announces it once.
  • A labeled section is a group named by its label, so a screen reader announces the section with its items.
  • Items are keyboard-operable links with href, or buttons without it. A list that scrolls follows keyboard focus.
  • Icons are aria-hidden; visible labels name the items.
  • The rail is never wider than its container; long names and IDs wrap instead of being cut off.

Manifest entry

<Sidebar>
  <SidebarLogo>OPERATOR</SidebarLogo>
  <SidebarSection label="NAVIGATION">
    <SidebarItem href="/overview" active>OVERVIEW</SidebarItem>
    <SidebarItem href="/metrics">METRICS</SidebarItem>
  </SidebarSection>
  <SidebarFooter>BUILD 1.0.0</SidebarFooter>
</Sidebar>
View agent manifest
{
  "description": "Vertical navigation rail, never wider than its container. Use with SidebarLogo, SidebarSection, and SidebarFooter. For the frame of a whole app (the workspace's name, the data connection, the time), pass the Sidebar to AppShell as its navigation instead of laying the frame out by hand. Standing alone it is a navigation landmark named Sidebar; inside AppShell's navigation it is a plain block, and the shell's landmark names the navigation. In a host of bounded height the sections scroll in place between the logo and the footer, which stay put.",
  "props": {},
  "slots": {
    "children": {
      "type": "SidebarLogo | SidebarSection | SidebarFooter",
      "required": true
    }
  },
  "composable_with": [
    "SidebarLogo",
    "SidebarSection",
    "SidebarFooter",
    "AppShell"
  ],
  "never_inside": [
    "Sidebar",
    "Card"
  ],
  "example": "<Sidebar>\n  <SidebarLogo>OPERATOR</SidebarLogo>\n  <SidebarSection label=\"NAVIGATION\">\n    <SidebarItem href=\"/overview\" active>OVERVIEW</SidebarItem>\n    <SidebarItem href=\"/metrics\">METRICS</SidebarItem>\n  </SidebarSection>\n  <SidebarFooter>BUILD 1.0.0</SidebarFooter>\n</Sidebar>"
}
<SidebarLogo>OPERATOR</SidebarLogo>
View agent manifest
{
  "description": "Sidebar brand/header slot — uppercase wordmark row at the top of the rail.",
  "props": {},
  "slots": {
    "children": {
      "type": "text",
      "required": true
    }
  },
  "composable_with": [
    "Sidebar"
  ],
  "never_inside": [
    "SidebarSection",
    "SidebarFooter"
  ],
  "example": "<SidebarLogo>OPERATOR</SidebarLogo>"
}
<SidebarSection label="NAVIGATION">
  <SidebarItem href="/overview">OVERVIEW</SidebarItem>
</SidebarSection>
View agent manifest
{
  "description": "Grouped block of SidebarItems with an optional uppercase section label; a labeled section is a group named by its label.",
  "props": {
    "label": {
      "type": "string"
    }
  },
  "slots": {
    "children": {
      "type": "SidebarItem",
      "required": true
    }
  },
  "composable_with": [
    "Sidebar"
  ],
  "never_inside": [
    "SidebarLogo",
    "SidebarFooter"
  ],
  "example": "<SidebarSection label=\"NAVIGATION\">\n  <SidebarItem href=\"/overview\">OVERVIEW</SidebarItem>\n</SidebarSection>"
}
<SidebarItem href="/overview" active>OVERVIEW</SidebarItem>
View agent manifest
{
  "description": "Uppercase navigation entry. Renders as an anchor when href is set, otherwise a button; marks the current page when active. Wrap case-sensitive names or IDs in a child with normal-case tracking-normal.",
  "props": {
    "active": {
      "type": "boolean",
      "default": false
    },
    "href": {
      "type": "string"
    },
    "asChild": {
      "type": "boolean",
      "default": false
    }
  },
  "slots": {
    "icon": {
      "type": "ReactNode",
      "required": false
    },
    "children": {
      "type": "text",
      "required": true
    }
  },
  "composable_with": [
    "SidebarSection"
  ],
  "never_inside": [
    "SidebarLogo",
    "SidebarFooter"
  ],
  "example": "<SidebarItem href=\"/overview\" active>OVERVIEW</SidebarItem>"
}
<SidebarFooter>BUILD 1.0.0</SidebarFooter>
View agent manifest
{
  "description": "Bottom-pinned sidebar slot — version string, account, or status controls.",
  "props": {},
  "slots": {
    "children": {
      "type": "any",
      "required": false
    }
  },
  "composable_with": [
    "Sidebar"
  ],
  "never_inside": [
    "SidebarLogo",
    "SidebarSection"
  ],
  "example": "<SidebarFooter>BUILD 1.0.0</SidebarFooter>"
}

Previous

Tabs

Next

TreeView

On this page