Sidebar

Provides responsive side navigation.

Sidebar web component

Provides responsive side navigation.

Setup

import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";

Navigation

Provide structured navigation items.

<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>

Attributes

Attribute	Type or allowed values	Default	Description
`label`	string	`"Primary navigation"`	Sets the accessible navigation label.

Properties

Property	Type or allowed values	Default	Description
`items`	json	`[]`	Defines navigation programmatically when declarative sidebar children are not used.

Slots

Name	Description
`default`	Declarative noora-sidebar-item and noora-sidebar-group children.

Styling parts

Name	Description
`sidebar`	The sidebar container.
`viewport`	The scrollable navigation viewport.