sp-sidenav
Attributes and Properties #
manageTabIndex
manage-tab-index
boolean
false
value
value
string | undefined
undefined
variant
variant
'multilevel' | undefined
undefined
Slots #
default slot
Events #
change
Event
Announces a change in the `value` property of the navigation element. This change can be "canceled" via `event.preventDefault()`.
Description #
Side navigation allows users to locate information and features within the UI. It can be used for either hierarchical or flat navigation, and gives the ability to group navigable items categorically. Side navigation is an opportunity to prioritize content or features based on your users’ needs in a way that maintains clear, persistent visibility. Use side navigation within the context of larger elements and mechanisms within the app frame.
<sp-sidenav>
elements accept both <sp-sidenav-item>
and <sp-sidenav-heading>
elements as children in order to construct a hierarchy of navigation elements. <sp-sidenav-item>
<sp-sidenav>
element parent. <sp-sidenav-heading>
elements will create visible structure by grouping their child <sp-sidenav-item>
children under a non-interactive heading.
Usage #
yarn add @spectrum-web-components/sidenav
Import the side effectful registration of <sp-sidenav>
, <sp-sidenav-heading>
, or <sp-sidenav-item>
via:
import '@spectrum-web-components/sidenav/sp-sidenav.js'; import '@spectrum-web-components/sidenav/sp-sidenav-heading.js'; import '@spectrum-web-components/sidenav/sp-sidenav-item.js';
When looking to leverage the Sidenav
, SidenavHeading
, or SidenavItem
base classes as a type and/or for extension purposes, do so via:
import { Sidenav, SidenavHeading, SidenavItem } from '@spectrum-web-components/sidenav';
Example #
<sp-sidenav defaultValue="Docs">
<sp-sidenav-item value="Docs" href="/components/SideNav">
Docs
</sp-sidenav-item>
<sp-sidenav-item value="Guides" href="/guides/getting_started">
Guides
</sp-sidenav-item>
<sp-sidenav-item value="Community" href="/community">
Community
</sp-sidenav-item>
<sp-sidenav-item value="Storybook" href="/storybook" target="_blank">
Storybook
</sp-sidenav-item>
<sp-sidenav-item
value="Releases"
href="http://git.corp.adobe.com/React/react-spectrum/releases"
target="_blank"
disabled
>
Releases
</sp-sidenav-item>
<sp-sidenav-item
value="GitHub"
href="http://git.corp.adobe.com/React/react-spectrum"
target="_blank"
>
GitHub
</sp-sidenav-item>
</sp-sidenav>
Multi-level #
Use this variation when you have multiple layers of hierarchical navigation. The headers are styled differently and possess the same interactive behavior as a treeview; clicking the header opens and collapses the children navigation items. In the instances where a top-level navigation item has no children, clicking will send the user to the location of the item.
<sp-sidenav variant="multilevel" defaultValue="Layout">
<sp-sidenav-item value="Guidelines" label="Guidelines"></sp-sidenav-item>
<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-item value="Elements" label="Elements"></sp-sidenav-item>
<sp-sidenav-item value="Patterns" label="Patterns"></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-item value="Section Title 2" label="Section Title 2">
<sp-icon-star slot="icon"></sp-icon-star>
</sp-sidenav-item>
<sp-sidenav-item value="Section Title 3" label="Section Title 3">
<sp-icon-star slot="icon"></sp-icon-star>
</sp-sidenav-item>
</sp-sidenav>
Heading #
<sp-sidenav variant="multilevel">
<sp-sidenav-item value="Section 1" label="Section 1"></sp-sidenav-item>
<sp-sidenav-item value="Section 2" label="Section 2"></sp-sidenav-item>
<sp-sidenav-heading label="Category 1">
<sp-sidenav-item value="Section 3" label="Section 3"></sp-sidenav-item>
<sp-sidenav-item value="Section 4" label="Section 4"></sp-sidenav-item>
</sp-sidenav-heading>
<sp-sidenav-heading label="Category 2">
<sp-sidenav-item value="Section 5" label="Section 5"></sp-sidenav-item>
<sp-sidenav-item value="Section 6" label="Section 6"></sp-sidenav-item>
</sp-sidenav-heading>
</sp-sidenav>
Accessibility #
When the manage-tab-index
attribute is set on an sp-sidenav
element then it will presents its child sp-sidenav-item
children with a single tab-stop. This will leave items beyond the selected item, or first when there is no focusable selected item, will be accessibile via the up and down arrow keys.