sp-sidenav-item

Examples

API

Attributes and Properties #

Property

Attribute

Type

Default

Description

expanded

boolean

false

selected

boolean

false

value

string | undefined

undefined

Slots #

Name

Description

default slot

the Sidenav Items to display as children of this item

Description #

An <sp-sidenav-item> stands as both a child item of an <sp-sidenav> element, as well as a parent for further subdivisions of that navigation. An <sp-sidenav-item> with further <sp-sidenav-item> children will count as a toggle for the visibility of this next level of navigation items, while also updating the parent <sp-sidenav> element to its value when selected.

Usage #

yarn add @spectrum-web-components/sidenav

Import the side effectful registration of <sp-sidenav-item> via:

import '@spectrum-web-components/sidenav/sp-sidenav-item.js';

When looking to leverage the SidenavItem base classes as a type and/or for extension purposes, do so via:

import { SidenavItem } from '@spectrum-web-components/sidenav';

Example #

<sp-sidenav>
    <sp-sidenav-item
        value="Docs"
        label="Docs"
        href="/components/sidenav"
    ></sp-sidenav-item>
</sp-sidenav>

Multi-level #

<sp-sidenav variant="multilevel">
    <sp-sidenav-item value="Styles" label="Styles" expanded>
        <sp-sidenav-item value="Color" label="Color">
        </sp-sidenav-item>
        <sp-sidenav-item value="Grid" label="Grid" expanded>
            <sp-sidenav-item value="Layout" label="Layout">
            </sp-sidenav-item>
            <sp-sidenav-item value="Responsive" label="Responsive">
            </sp-sidenav-item>
        </sp-sidenav-item>
        <sp-sidenav-item value="Typography" label="Typography">
        </sp-sidenav-item>
    </sp-sidenav-item>
</sp-sidenav-itm>

Icon #

<sp-sidenav>
    <sp-sidenav-item value="Section Title 1" label="Section Title 1">
        <sp-icon-star slot="icon"></sp-icon-star>
    </sp-sidenav-item>
</sp-sidenav>

Spectrum Web Components