Examples API

Attributes and Properties #

Property Attribute Type Default Description expanded expanded boolean false selected selected boolean false value 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 #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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 #


Multi-level #

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

Icon #

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