sp-sidenav

NPM 1.7.0

View Storybook

Try it on Stackblitz
Overview API Changelog

Overview

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 <sp-sidenav-item> children under a non-interactive heading.

View the design documentation for this component.

Usage

See it on NPM! How big is this package in your project? Try it on Stackblitz

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';

Anatomy

The side navigation consists of several key parts:

  • A container element that manages the side navigation behavior
  • Individual side navigation items that may or may not be expandable
  • Children side navigation items that are revealed when a parent item is expanded
  • Optional heading with a label
<sp-sidenav>
    <sp-sidenav-heading label="Piano"></sp-sidenav-heading>
    <sp-sidenav-item label="Treble"></sp-sidenav-item>
    <sp-sidenav-item label="Bass"></sp-sidenav-item>
    <sp-sidenav-item disabled label="Grand staff"></sp-sidenav-item>
</sp-sidenav>

Options

Default (single-level)

Make sure to use the right option for the context and user needs. Don’t mix behavior, styles, or variations together in a single navigation menu. Follow these guidelines:

  • When navigation is simple, use the single level side navigation.
  • When navigation is simple but categorical, use the single level side navigation with headers.
  • When navigation is expansive, hierarchical, and/or you need progressive disclosure in the menu behavior, use the multi-level side navigation. Up to three levels of navigation are supported.
<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"
        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="/releases"
        target="_blank"
        label="Releases"
        disabled
    ></sp-sidenav-item>
    <sp-sidenav-item
        value="GitHub"
        href="/github"
        target="_blank"
        label="Github"
    ></sp-sidenav-item>
</sp-sidenav>
 Single-level with icons

In single-level side navigation, do not mix icon usage between side nav items. Either all side nav items have icons, or no items have icons. In cases where the navigation content might be user-generated, stick to text-only navigation items.

<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" expanded>
        <sp-icon-star slot="icon"></sp-icon-star>
    </sp-sidenav-item>
    <sp-sidenav-item value="Section Title 3" label="Section Title 3" expanded>
        <sp-icon-star slot="icon"></sp-icon-star>
    </sp-sidenav-item>
</sp-sidenav>
 With headings

Use headings in single level side navigation when it's beneficial to group navigation items into categories. The headings are not interactive. If items don’t fall into a category, place them at the top. When using the heading variation, an entire category should either all have icons or all be text-only.

Although headings can be used in multi-level side navigation, they can only be used as first-level items, and are not to be nested.

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

Use variant="multilevel" when you have multiple layers of hierarchical navigation. In the instances where a top-level navigation item has no children, clicking will send the user to the location of the item. Additionally, headings can be used in multi-level side navigation, but they can only be used as first-level items, and are not to be nested.

Up to three levels of navigation are supported.

<sp-sidenav variant="multilevel" defaultValue="Layout">
    <sp-sidenav-item value="Guidelines" label="Guidelines"></sp-sidenav-item>
    <sp-sidenav-heading value="Styles" label="Styles">
        <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-heading>
    <sp-sidenav-item value="Elements" label="Elements"></sp-sidenav-item>
    <sp-sidenav-item value="Patterns" label="Patterns"></sp-sidenav-item>
</sp-sidenav>
 Multi-level with icons

In multi-level side navigation, icon and text-only navigation items can be used in combination, but only the first-level items can have icons to maintain visual clarity and hierarchy. Icons only appear on first-level items, and sublevels (second and third) should not include icons. In cases where the navigation content might be user-generated, stick to text-only navigation items.

Multi-level side navigation icon usage

  • All icons: all items have icons
  • No icons: no items have icons
  • Mixed icons: only first-level items have icons; second and third-level items do not
<sp-sidenav>
    <sp-sidenav-item value="Section Title 1" label="Section Title 1">
        <sp-icon-star slot="icon"></sp-icon-star>
        <sp-sidenav-item
            value="Typography"
            label="Typography"
        ></sp-sidenav-item>
    </sp-sidenav-item>
    <sp-sidenav-item value="Section Title 2" label="Section Title 2" expanded>
        <sp-icon-star slot="icon"></sp-icon-star>
        <sp-sidenav-item
            value="Iconography"
            label="Iconography"
        ></sp-sidenav-item>
    </sp-sidenav-item>
    <sp-sidenav-item value="Section Title 3" label="Section Title 3" expanded>
        <sp-icon-star slot="icon"></sp-icon-star>
        <sp-sidenav-item value="Patterns" label="Patterns" expanded>
            <sp-sidenav-item value="Forms" label="Forms"></sp-sidenav-item>
            <sp-sidenav-item value="Cards" label="Cards"></sp-sidenav-item>
        </sp-sidenav-item>
    </sp-sidenav-item>
</sp-sidenav>

Behaviors

When an side navigation item is programmatically selected in variant="multilevel", all of its parent items automatically expand to reveal the selection path.

Accessibility

When the manage-tab-index attribute is set on an <sp-sidenav> element, it will present its <sp-sidenav-item> children with a single tab-stop. This will leave items beyond the selected item (or when there is no focusable selected item), accessible via the up and down arrow keys. Items with expanded children that aren't selected lose focus when manage-tab-index is active.

Roles and ARIA attributes

  • <sp-sidenav> renders a <nav> tag and implicitly sets role="navigation"
  • Optional aria-label is available for further identification
  • Individual items use role="listitem" automatically
  • Nested list containers (i.e. <div> tags) use role="list"
  • Nested item containers use aria-labelledby referencing their parent item's id
  • aria-expanded="true/false" indicates expand/collapse state for parent items
  • aria-controls on parent items is set to the id of their child role="list" containers when expanded
  • aria-current="page" indicates the currently selected item when it has an href
  • When the <sp-sidenav> includes the disabled property, the entire component receives tabindex="-1"
  • aria-hidden="true" is applied to all decorative icons

Keyboard interaction

  • Tab and Shift + Tab moves focus into or out of the side nav
  • If manage-tab-index is enabled, the up and down arrow keys will shift focus between all visible sidenav items
  • Enter selects a side nav item or toggles expansion for parent items

Patch Changes

  • #5504 cde976d Thanks @castastrophe! - Replace deprecated word-break: break-word with overflow-wrap: break-word to align with modern CSS standards and improve cross-browser compatibility. This property was deprecated in Chrome 44 (July 2015) in favor of the standardized overflow-wrap property.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.7.0
    • @spectrum-web-components/reactive-controllers@1.7.0
    • @spectrum-web-components/shared@1.7.0

1.6.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.6.0
    • @spectrum-web-components/reactive-controllers@1.6.0
    • @spectrum-web-components/shared@1.6.0

1.5.0

Patch Changes

  • #5271 165a904 Thanks @renovate! - Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

  • Updated dependencies []:

    • @spectrum-web-components/base@1.5.0
    • @spectrum-web-components/reactive-controllers@1.5.0
    • @spectrum-web-components/shared@1.5.0

1.4.0

Patch Changes

  • Updated dependencies []:
    • @spectrum-web-components/base@1.4.0
    • @spectrum-web-components/reactive-controllers@1.4.0
    • @spectrum-web-components/shared@1.4.0

1.3.0

Patch Changes

  • Updated dependencies [ea38ef0]:
    • @spectrum-web-components/reactive-controllers@1.3.0
    • @spectrum-web-components/base@1.3.0
    • @spectrum-web-components/shared@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/sidenav

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/sidenav

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/sidenav

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/sidenav

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/sidenav

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/sidenav

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/sidenav

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/sidenav

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/sidenav

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/sidenav

0.47.1 (2024-08-27)

Bug Fixes

  • reactive-controllers: update focusable element's tab-index to 0 on accepting focus (#4630) (d359e84)

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/sidenav

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/sidenav

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/sidenav

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/sidenav

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/sidenav

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/sidenav

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/sidenav

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/sidenav

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/sidenav

0.42.0 (2024-03-19)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/sidenav

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/sidenav

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/sidenav

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/sidenav

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/sidenav

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/sidenav

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/sidenav

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/sidenav

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/sidenav

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/sidenav

0.39.3 (2023-10-18)

Bug Fixes

  • update deps graph, fix imports (f633005)

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/sidenav

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/sidenav

0.39.0 (2023-09-25)

Note: Version bump only for package @spectrum-web-components/sidenav

0.38.0 (2023-09-05)

Bug Fixes

  • sidenav: reintroduce support for slotted label content (26c7e6e)

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/sidenav

0.36.0 (2023-08-18)

Features

  • sidenav: migrate to core tokens (1846aa3)

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/sidenav

0.34.0 (2023-07-11)

Bug Fixes

  • sidenav: express hierarchy using list and listitem (f9019d7), closes #3348 #3348

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/sidenav

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/sidenav

0.31.0 (2023-05-17)

Bug Fixes

  • generate react/picker and pass react TS checks (101b88c)

0.30.0 (2023-05-03)

Bug Fixes

  • #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)

Features

  • 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)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)
  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

Reverts

  • Revert "chore: release new versions" (a6d655d)

0.14.3 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/sidenav

0.14.2 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/sidenav

0.14.1 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/sidenav

0.14.0 (2023-03-08)

Features

  • implement #2964 for sidenav component (99afac9)
  • implement #2964 for sidenav component (5bf36e5)

0.13.10 (2023-02-21)

Bug Fixes

  • #2933 by adding optional variant property to SideNav (9c45c33)

0.13.9 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.8 (2023-01-23)

Bug Fixes

  • sidenav: prevent items with hrefs from toggling expanded or selection (7ff4920)

0.13.7 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.6 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.5 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.4 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.3 (2022-10-28)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.2 (2022-10-17)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.1 (2022-10-10)

Note: Version bump only for package @spectrum-web-components/sidenav

0.13.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.12.15 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.14 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.13 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.12 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.11 (2022-05-27)

Bug Fixes

  • update consumption of Spectrum CSS for latest version (ed2305b)

0.12.10 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.9 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.8 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.7 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.6 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.5 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.4 (2022-02-02)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/sidenav

0.12.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.11.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/sidenav

0.11.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.10.10 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/sidenav

0.10.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/sidenav

0.10.8 (2021-09-13)

Note: Version bump only for package @spectrum-web-components/sidenav

0.10.7 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.10.6 (2021-08-17)

Bug Fixes

  • update slotting in "sp-sidenav-item" to allow for labelling in HTML (928c476)

0.10.5 (2021-07-22)

Bug Fixes

  • style clean up (49e1537)

0.10.4 (2021-07-01)

Note: Version bump only for package @spectrum-web-components/sidenav

0.10.3 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/sidenav

0.10.2 (2021-06-07)

Note: Version bump only for package @spectrum-web-components/sidenav

0.10.1 (2021-05-24)

Bug Fixes

  • prevent tabindex=-1 elements from placing focus on their host (1ac1293)

0.10.0 (2021-05-12)

Bug Fixes

  • ensure item exists when attempting to acquire next item to focus (fb52cea)

Features

  • sidenav: add a "change" event to track the "value" property (8d3a0bd)

0.9.5 (2021-04-15)

Note: Version bump only for package @spectrum-web-components/sidenav

0.9.4 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/sidenav

0.9.3 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/sidenav

0.9.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/sidenav

0.9.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/sidenav

0.9.0 (2021-03-04)

Features

  • use latest exports specification (a7ecf4b)

0.8.1 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.8.0 (2021-01-21)

Bug Fixes

  • 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)

Features

  • action-button: add action button pattern (03ac00a)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • sidenav: update spectrum css input (bd43201)

0.7.0 (2021-01-13)

Bug Fixes

  • 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)

Features

  • action-button: add action button pattern (03ac00a)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • sidenav: update spectrum css input (bd43201)

0.6.0 (2020-11-20)

Features

  • support rel attribute for sidenav item (90522e7)

0.5.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/sidenav

0.5.3 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.5.2 (2020-09-25)

Bug Fixes

  • update side effect listings (8160d3a)

0.5.1 (2020-09-14)

Note: Version bump only for package @spectrum-web-components/sidenav

0.5.0 (2020-08-31)

Features

  • update to Spectrum CSS v3.0.0 (e8b3d8f)

0.4.3 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/sidenav

0.4.2 (2020-07-27)

Bug Fixes

  • ensure browser understandable extensions (f4e59f7)

0.4.1 (2020-07-22)

Note: Version bump only for package @spectrum-web-components/sidenav

0.4.0 (2020-07-17)

Bug Fixes

  • sidenav: add aria-current when using href with sidenav-item (9172639)
  • sidenav: manage tabindex when interacting with keyboard (ea977cf)

Features

  • leverage "exports" field in package.json (321abd7)

0.3.8 (2020-06-08)

Bug Fixes

  • sidenav: add support for icons and document icons/headlines (9ddb363)
  • sidenav: tighten Spectrum adherence and sharpen docs delivery (d4c70cd)

0.3.7 (2020-04-16)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.3.6 (2020-04-10)

Note: Version bump only for package @spectrum-web-components/sidenav

0.3.5 (2020-04-07)

Note: Version bump only for package @spectrum-web-components/sidenav

0.3.4 (2020-03-11)

Bug Fixes

  • correct a11y tree (f7e54e5)

0.3.3 (2020-02-05)

Bug Fixes

  • correctly track "activeElement" across shadow boundaries (8b9f93a)

0.3.2 (2020-02-01)

Note: Version bump only for package @spectrum-web-components/sidenav

0.3.1 (2020-01-30)

Bug Fixes

  • fix expanding sidenav item that has no value (b28cdac)

0.3.0 (2020-01-06)

Features

  • sidenav: add keyboard accessibility (6ff622b)

0.2.2 (2019-12-02)

Bug Fixes

  • normalize "event" and "error" argument names (8d382cd)

0.2.1 (2019-11-27)

Bug Fixes

  • include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19)

Features

  • use :focus-visable (via polyfill) instead of :focus (11c6fc7)
  • use @adobe/spectrum-css@2.15.1 (3918888)

0.1.4 (2019-10-14)

Performance Improvements

  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03)

Note: Version bump only for package @spectrum-web-components/sidenav

Attributes and Properties

Property Attribute Type Default Description disabled disabled boolean false Disable this control. It will not receive focus or events label label string | undefined | undefined undefined An accessible label that describes the component, so that the side navigation can be distinguished from other navigation by screen reader users. It will be applied to aria-label, but not visually rendered. manageTabIndex manage-tab-index boolean false tabIndex tabIndex number The tab index to apply to this control. See general documentation about the tabindex HTML property value value string | undefined undefined variant variant 'multilevel' | undefined undefined The multilevel variant will have multiple layers of hierarchical navigation items.

Slots

Name Description default slot the Sidenav Items to display

Events

Name Type Description change Event Announces a change in the `value` property of the navigation element. This change can be "canceled" via `event.preventDefault()`.