Layout
A structural component that defines the overall page structure with a sidebar navigation. On smaller screens the sidebar collapses into a header with a menu button that slides the navigation in from the left.
| Property | Description | Type |
|---|---|---|
LayoutNav open | Slides the navigation in on screens narrower than 82rem and blurs the page content behind it. The sidebar is always shown on larger screens. | boolean |
LayoutNav label | Accessible name for the navigation landmark. Defaults to "Main". | string |
LayoutNav on:close | Fires when the user presses Esc while the navigation is open. Set open to false in response. Focus moves back to the menu button if it was inside the navigation. | event |
LayoutMenuButton open | Reflects whether the navigation is open so screen readers announce it (aria-expanded). | boolean |
LayoutMenuButton on:click | Fires when the menu button is pressed. Toggle open in response. | event |
Layout slot="logo" | Logo shown above the sidebar on larger screens. | slot |
LayoutHeader slot="mobile-logo" | Logo centered in the header on smaller screens. | slot |
NavItem slot="icon" | Icon before the label. Receives animate, which is true while the item is hovered or keyboard-focused, so animated icons play for the whole row. Also available on NavGroupItem. | slot |
NavGroup icon | Snippet rendered before the group title. Receives the same animate flag. | Snippet<[boolean]> |