sp-sidenav-item

Examples API

Attributes and Properties #

Property Attribute Type Default Description
autofocus autofocus boolean false When this control is rendered, focus it automatically
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false Disable this control. It will not receive focus or events
download download string | undefined
expanded expanded boolean false
href href string | undefined
label label string | undefined
rel rel string | undefined
selected selected boolean false
tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property
target target '_blank' | '_parent' | '_self' | '_top' | undefined
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 #

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

Multi-level #

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