Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- lock prerelease versions for Spectrum CSS (#5014) (8aa7734)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- reactive-controllers: update focusable element's tab-index to 0 on accepting focus (#4630) (d359e84)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- asset: use core tokens (99e76f4)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- update deps graph, fix imports (f633005)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- sidenav: reintroduce support for slotted label content (26c7e6e)
Note: Version bump only for package @spectrum-web-components/sidenav
- sidenav: migrate to core tokens (1846aa3)
Note: Version bump only for package @spectrum-web-components/sidenav
- sidenav: express hierarchy using list and listitem (f9019d7), closes #3348 #3348
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- generate react/picker and pass react TS checks (101b88c)
- #2933 by adding optional variant property to SideNav (9c45c33)
- correct @element jsDoc listing across library (c97a632)
- correct a11y tree (f7e54e5)
- correctly track "activeElement" across shadow boundaries (8b9f93a)
- ensure browser understandable extensions (f4e59f7)
- ensure item exists when attempting to acquire next item to focus (fb52cea)
- fix expanding sidenav item that has no value (b28cdac)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- include default export in the "exports" fields (f32407d)
- include the "types" entry in package.json files (b432f59)
- normalize "event" and "error" argument names (8d382cd)
- prevent infinite loops when all children are [disabled] (2deac3d)
- prevent tabindex=-1 elements from placing focus on their host (1ac1293)
- sidenav: add aria-current when using href with sidenav-item (9172639)
- sidenav: add support for icons and document icons/headlines (9ddb363)
- sidenav: manage tabindex when interacting with keyboard (ea977cf)
- sidenav: prevent items with hrefs from toggling expanded or selection (7ff4920)
- sidenav: tighten Spectrum adherence and sharpen docs delivery (d4c70cd)
- stop merging selectors in a way that alters the cascade (369388f)
- style clean up (49e1537)
- update consumption of Spectrum CSS for latest version (ed2305b)
- update latest Spectrum CSS beta releases (d8d3acc)
- update side effect listings (8160d3a)
- update slotting in "sp-sidenav-item" to allow for labelling in HTML (928c476)
- update to latest spectrum-css packages (a5ca19f)
- use latest @spectrum-css/* versions (c35eb86)
- action-button: add action button pattern (03ac00a)
- adopt DNA@7 base Spectrum CSS (e08cafd)
- icons-workflow: vend fully registered icon components (941f3a4)
- implement #2964 for sidenav component (99afac9)
- implement #2964 for sidenav component (5bf36e5)
- include all Dev Mode files in side effects (f70817c)
- leverage "exports" field in package.json (321abd7)
- shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
- sidenav: add a "change" event to track the "value" property (8d3a0bd)
- sidenav: add keyboard accessibility (6ff622b)
- sidenav: update spectrum css input (bd43201)
- support rel attribute for sidenav item (90522e7)
- update to Spectrum CSS v3.0.0 (e8b3d8f)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use latest exports specification (a7ecf4b)
- use "sideEffects" listing in package.json (7271614)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
- Revert "chore: release new versions" (a6d655d)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- implement #2964 for sidenav component (99afac9)
- implement #2964 for sidenav component (5bf36e5)
- #2933 by adding optional variant property to SideNav (9c45c33)
Note: Version bump only for package @spectrum-web-components/sidenav
- sidenav: prevent items with hrefs from toggling expanded or selection (7ff4920)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- include all Dev Mode files in side effects (f70817c)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- update consumption of Spectrum CSS for latest version (ed2305b)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- adopt DNA@7 base Spectrum CSS (e08cafd)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- correct @element jsDoc listing across library (c97a632)
- update slotting in "sp-sidenav-item" to allow for labelling in HTML (928c476)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- prevent tabindex=-1 elements from placing focus on their host (1ac1293)
- ensure item exists when attempting to acquire next item to focus (fb52cea)
- sidenav: add a "change" event to track the "value" property (8d3a0bd)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- use latest exports specification (a7ecf4b)
- update to latest spectrum-css packages (a5ca19f)
- include the "types" entry in package.json files (b432f59)
- prevent infinite loops when all children are [disabled] (2deac3d)
- stop merging selectors in a way that alters the cascade (369388f)
- update latest Spectrum CSS beta releases (d8d3acc)
- use latest @spectrum-css/* versions (c35eb86)
- action-button: add action button pattern (03ac00a)
- icons-workflow: vend fully registered icon components (941f3a4)
- sidenav: update spectrum css input (bd43201)
- include the "types" entry in package.json files (b432f59)
- prevent infinite loops when all children are disabled
- stop merging selectors in a way that alters the cascade (369388f)
- update latest Spectrum CSS beta releases (d8d3acc)
- use latest @spectrum-css/* versions (c35eb86)
- action-button: add action button pattern (03ac00a)
- icons-workflow: vend fully registered icon components (941f3a4)
- sidenav: update spectrum css input (bd43201)
- support rel attribute for sidenav item (90522e7)
Note: Version bump only for package @spectrum-web-components/sidenav
- include default export in the "exports" fields (f32407d)
- update side effect listings (8160d3a)
Note: Version bump only for package @spectrum-web-components/sidenav
- update to Spectrum CSS v3.0.0 (e8b3d8f)
Note: Version bump only for package @spectrum-web-components/sidenav
- ensure browser understandable extensions (f4e59f7)
Note: Version bump only for package @spectrum-web-components/sidenav
- sidenav: add aria-current when using href with sidenav-item (9172639)
- sidenav: manage tabindex when interacting with keyboard (ea977cf)
- leverage "exports" field in package.json (321abd7)
- sidenav: add support for icons and document icons/headlines (9ddb363)
- sidenav: tighten Spectrum adherence and sharpen docs delivery (d4c70cd)
- use "sideEffects" listing in package.json (7271614)
Note: Version bump only for package @spectrum-web-components/sidenav
Note: Version bump only for package @spectrum-web-components/sidenav
- correct a11y tree (f7e54e5)
- correctly track "activeElement" across shadow boundaries (8b9f93a)
Note: Version bump only for package @spectrum-web-components/sidenav
- fix expanding sidenav item that has no value (b28cdac)
- sidenav: add keyboard accessibility (6ff622b)
- normalize "event" and "error" argument names (8d382cd)
- include "type" in package.json, generate custom-elements.json (1a8d716)
- use :focus-visable (via polyfill) instead of :focus (11c6fc7)
- use @adobe/spectrum-css@2.15.1 (3918888)
- use imported TypeScript helpers instead of inlining them (cc2bd0a)
Note: Version bump only for package @spectrum-web-components/sidenav
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>
elements will place themselves as a togglable child of their <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.

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';
<sp-sidenav defaultValue="Docs">
<sp-sidenav-item
value="Docs"
href="/components/SideNav"
label="Docs"
selected
></sp-sidenav-item>
<sp-sidenav-item
value="Guides"
href="/guides/getting_started"
label="Guides"
></sp-sidenav-item>
<sp-sidenav-item
value="Community"
href="/community"
label="Community"
></sp-sidenav-item>
<sp-sidenav-item
value="Storybook"
href="/storybook"
target="_blank"
label="Storybook"
></sp-sidenav-item>
<sp-sidenav-item
value="Releases"
href="http://git.corp.adobe.com/React/react-spectrum/releases"
target="_blank"
label="Releases"
disabled
></sp-sidenav-item>
<sp-sidenav-item
value="GitHub"
href="http://git.corp.adobe.com/React/react-spectrum"
target="_blank"
label="Github"
></sp-sidenav-item>
</sp-sidenav>
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>
<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>
<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>
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.