ContextQMD
Back to Tuist

Sidebar

noora/docs/components/sidebar.md

4.204.01.4 KB
Original Source
<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

Sidebar

Provides responsive side navigation.

html
<noora-sidebar>
  <noora-sidebar-item href="/" icon="dashboard">Dashboard</noora-sidebar-item>
</noora-sidebar>

Attributes

AttributeType or allowed valuesDefaultDescription
labelstring"Primary navigation"Sets the accessible navigation label.

Properties

PropertyType or allowed valuesDefaultDescription
itemsArray<Record<string, unknown>>[]Defines navigation programmatically when declarative sidebar children are not used.

Slots

SlotDescription
defaultDeclarative noora-sidebar-item and noora-sidebar-group children.

Styling parts

PartDescription
sidebarThe sidebar container.
viewportThe scrollable navigation viewport.

Provide structured navigation items.

html
<noora-sidebar>
  <noora-sidebar-item href="/" icon="dashboard" selected>Dashboard</noora-sidebar-item>
  <noora-sidebar-group label="Projects" default-open>
    <noora-sidebar-item href="/projects/tuist">Tuist</noora-sidebar-item>
    <noora-sidebar-item href="/projects/noora">Noora</noora-sidebar-item>
  </noora-sidebar-group>
</noora-sidebar>