<h2>What&#39;s new in v3</h2>
<ul>
<li><strong>Item system:</strong> The side navigation now uses the new item system so all interactions work the same. Users can build a menu with a DDS v3 item and swap it into the component.</li>
<li><strong>Spacing:</strong> Padding is now 8 px, and the menu gap uses the 4 px “menu-gap” token.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Side navigation helps users move between major sections of an experience. It keeps key navigation items visible and provides quick access to primary areas of an application.</p>
<p>Use side navigation to:</p>
<ul>
<li>Organize content into clear, top‑level sections</li>
<li>Provide consistent, always‑visible navigation</li>
<li>Help users move efficiently between major areas of an app</li>
</ul>
<h2>Anatomy</h2>
<p>The side navigation component is organized into primary, secondary, and tertiary levels and made up of <a href="/components/link/">links</a>, <a href="/foundations/icons/">icons</a>, and chevrons, along with a slide out panel.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/side-navigation?tab=Design#design-layout">layout</a> section. </p>
<details data-name='image-block' data-images='[{"alt":"1. Navigation in the collapsible view, showing primary-page-level icons only. 2. Navigation in its expanded state, showing text with icon on primary levels. 3. Primary group in side navigation with secondary and tertiary navigation underneath. 4. Secondary pages under a primary group. 5. Secondary group with chevron indicating tertiary levels. 6. Tertiary page navigation under a secondary group. 7. Chevrons to collapse and expand navigation in the collapsible view. Chevrons do not appear in fixed view.","caption":"1. Navigation in the collapsible view, showing primary page-level icons only.\n2. Navigation in its expanded state, showing text with icon on primary levels.\n3. Primary group in side navigation with secondary and tertiary navigation underneath.\n4. Secondary pages under a primary group.\n5. Secondary group with chevron indicating tertiary levels.\n6. Tertiary page navigation under a secondary group.\n7. Chevrons to collapse and expand navigation in the collapsible view. Chevrons do not appear in fixed view.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/vertical-nav/","type":"External"},"title":"Vertical navigation article","description":"Read the Nielsen Norman Group&#39;s article on side navigation.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/topic/information-architecture/","type":"External"},"title":"Information architecture articles","description":"Review the NN/g&#39;s information architecture videos and articles.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/icon-testing/","type":"External"},"title":"Icon recognition","description":"Review NN/g&#39;s recommendations on how to test icon usability.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/steering-law/","type":"External"},"title":"Accot-Zhai Steering Law in UI","description":"Read the Nielsen Norman Group&#39;s article.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/videos/vertical-navigation/","type":"External"},"title":"Vertical navigation video","description":"Read the Nielsen Norman Group&#39;s video on side navigation.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/is-navigation-useful/","type":"External"},"title":"Is Navigation Useful?","description":"Read the Nielsen Norman Group&#39;s article on navigation.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/videos/audience-based-website-navigation/","type":"External"},"title":"Audience-Based Website Navigation","description":"Read the Nielsen Norman Group&#39;s article on navigation.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/ia-vs-navigation/","type":"External"},"title":"Information Architecture and navigation","description":"Read the Nielsen Norman Group&#39;s article on IA and navigation.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Kinds

There are two optional default views for side navigation: fixed and collapsed. There is also the option to place the side menu on the right or left side of the screen, depending on users’ language preferences.

### Fixed view

In the default fixed state, the navigation panel is always open. This experience allows navigation items to remain visible on the screen as the user scrolls. It also gives users a visual of the site architecture. 

For the majority of experiences, the fixed view is recommended. 

For [breakpoints](/foundations/grid/#breakpoints) of 768 pixels and below (medium to extra-small ranges), the navigation menu automatically collapses unless it’s set to remain fixed and open. In this case, side navigation won’t be persistent on the screen, being visible under a menu.

<details data-name='image-block' data-images='[{"alt":"Example of how side navigation stays open in the fixed view, showing all primary navigation options when a user first visits a website.","caption":"Example of how side navigation stays open in the fixed view, showing all primary navigation options when a user first visits a website.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-fixed-view.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Collapsible view

The collapsible view allows the user to expand or collapse the panel by pressing the chevron at the bottom of the panel. 

This menu also auto-collapses at breakpoints of 768 pixels and smaller (medium through extra-small ranges). Consider using the default collapsible view for breakpoints larger than 768 pixels only if it increases a product’s usability.

For this view, all primary-level items must have [icons](/foundations/icons) to illustrate navigation choices during collapsed mode.

<details data-name='image-block' data-images='[{"alt":"Side navigation panel in collapsed and expanded view, with a focus on the chevron that opens and closes the panel. 1. **Expanded view**: When expanded, the chevron at the bottom points the opposite direction from its collapsed state, giving users the option to manually close it. 2. **Collapsed view**: When users want to collapse the side navigation from the expanded view, they can click the chevron at the bottom of the side navigation panel to close it.","caption":"Side navigation panel in collapsed and expanded view, with a focus on the chevron that opens and closes the panel.\n\n1. Expanded view: when expanded, the chevron at the bottom points the opposite direction from its collapsed state, giving users the option to manually close it.\n2. Collapsed view: when users want to collapse the side navigation from the expanded view, they can click the chevron at the bottom of the side navigation panel to close it.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-collapsible-view.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Options

Choose a navigation component with or without icons on primary items. However, this component auto-collapses for tablet and mobile breakpoints, so it’s recommended that all primary items contain icons.

#### Icon plus text links

As stated above, if using icons, only primary levels will contain icons. Secondary and tertiary levels will feature text only. 

There are some best practices to consider when choosing [icons](/foundations/icons) for navigation:

* Make sure icons are universally recognizable by most audiences, and not chosen arbitrarily.
* Icons should convey the same meaning as the text label they accompany.
* Icons should be simple and not graphically complex.
* Icons should have aria-labels to describe their meaning to screen readers.

#### Text-only links

The side navigation component can also be used with text-only links. It’s not recommended to use text-only links for the collapsible navigation view. 

When using text-only links, eliminate 56 pixels of white space from the portion where an icon would normally exist to balance the alignment. 

For tips on how to craft navigation labels, see the [content guidelines section](/components/side-navigation/?tab=Design#standards) on this page.

#### Secondary and tertiary navigation

The side navigation component includes an option for nested secondary and tertiary levels under the primary navigation. Currently, the tertiary level is the lowest navigational level. 

Secondary and tertiary navigation is hidden by default and revealed using a chevron. The chevron will stay upturned until a user closes that group manually.

<details data-name='image-block' data-images='[{"alt":"Selecting a primary group reveals the secondary page levels. Secondary groups function similarly, in that selecting the page drops down tertiary page levels.","caption":"1. Selecting a primary group reveals the secondary page levels. Secondary groups function similarly, in that selecting the page drops down tertiary page levels.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-options-secondary-tertiary-navigation.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Sizes

While the sizing and padding is automatically built into the side navigation component, these specifications will help designers gauge which items may not be visible in the menu without scrolling.

<details data-name='image-block' data-images='[{"alt":"Top and bottom padding between menu items is 16 pixels on the top and bottom of the link. The Icon is 16 pixels, and there is a 4 pixel margin on the left side for the selected active state border marker.","caption":"Top and bottom padding between menu items is 16 pixels on the top and bottom of the link. The icon is 16 pixels, and there is a 4-pixel margin on the left side for the selected active state border marker.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-sizing-spacing.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Width

<details data-name='image-block' data-images='[{"alt":"In its fixed or expanded state, side navigation is 280 pixels wide. When collapsed, it&#39;s 60 pixels wide.","caption":"In its fixed or expanded state, side navigation is 280 pixels wide. When collapsed, it’s 60 pixels wide.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-width.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Grid

There are three [grids](/foundations/grid/) used in side navigation component:

1. **Compact rail grid**: for collapsible side navigation
2. **Expanded rail grid**: for fixed side navigation
3. **Floating rail grid**: for floating expanded side navigation

## Layout

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"Side navigation building block and slot","caption":"Example of the component with building block and slot.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

#### Selection

Beyond the expand and collapse behavior of side navigation, users will experience different states during page selection.

#### Overflow and scrolling

Side navigation can vertically scroll independently from the rest of the on-screen content. 

For longer navigation lists, a scrollbar will appear. In long menus, order items by importance, placing the least important pages at the bottom so that the higher priority items are visible without scrolling.

<details data-name='image-block' data-images='[{"alt":"An example of how a scrollbar appears to the right of navigation, when page levels extend the screen height.","caption":"An example of how a scrollbar appears to the right of navigation, when page levels extend the screen height.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-interaction-overflow-and-scrolling.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Text wrapping

It’s best to avoid long titles and not wrap text. In general, text should be scannable and succinct. If navigation items have longer titles, the text wraps to the next line, and all the padding between items remains the same.

<details data-name='image-block' data-images='[{"alt":"In this view, a long page title wraps under the text element in side navigation.","caption":"In this view, a long page title wraps under the text element in side navigation.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-interaction-text-wrapping.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### Auto collapse

At grid sizes, M (medium) to XS (extra small) for viewports 768 pixels and below, the compact rail grid dictates that the side menu will display in collapsed mode automatically.

<details data-name='image-block' data-images='[{"alt":"A demonstration of how a 6-column grid would automatically display the side navigation in the collapsible view.","caption":"A demonstration of how a 6-column grid would automatically display the side navigation in the collapsible view.","url":"https://dds.dell.com/site/v3/components/side-navigation/side-navigation-auto-collapse.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Standards

### Accessibility

#### Make sure icons on all parent, primary navigation items have been validated for recognizability and understandability

Refer to the guidance on this page regarding icon choice in navigation. Validate icon meaning with appropriate testing and feedback from people who have self-identified as having relevant disabilities. Recognizability is also something that can be tested at scale across all levels of ability.

#### All navigation labels must be clear and intuitive

Navigation labels should make sense without needing more context. The link text alone should convey the function and purpose of the link. In addition, it should have unique descriptions that are easy to speak out loud with assistive devices.

#### Navigation link labels should be readable by assistive technologies, even when navigation is collapsed

Technical guidance is provided in [Storybook Demo for Vanilla](https://vanilla.delldesignsystem.com/?path=/docs/components-side-nav--docs).

WCAG 2.2: [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html)

### Content

#### Be succinct

Try to keep navigation link labels under 20 characters to avoid text wrapping. 

Keep in mind, menu items must be short enough to scan, but long enough to be clear.

#### Be consistent

Keep all labels similar in length, context, and type. 

If using nouns to title pages and links, use nouns in the navigation. 

If using verbs, use verbs for all link titles and pages. Likewise, make sure they are similar character lengths.

#### Be specific

Tell users exactly where they are going and what they can expect.

#### Link titles should reflect page titles

To guide user to relevant information and actions, make sure page titles match navigation links.

#### Capitalization

Use sentence case in navigation links.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).
| Name                             | Collection | CSS var                                     | Preview    |
| -------------------------------- | ---------- | ------------------------------------------- | ---------- |
| side-navigation/expanded-width   | Component  | `var(--dds-side-navigation-expanded-width)` | -          |
| side-navigation/border           | -          | `var(--dds-side-navigation-border)`         | -          |
| color/background/SURFACE/neutral | Semantic   | `var(--dds-color-background-surface-neutral)` | #FFFFFF   |
| color/border/NEUTRAL/pale        | -          | `var(--dds-color-border-neutral-pale)`      | #C5D4E3   |
| spacing/xs                       | Semantic   | `var(--dds-spacing-xs)`                     | -          |
| menu/padding                     | Component  | `var(--dds-menu-padding)`                   | -          |
| side-navigation/expanded-width   | -          | `var(--dds-side-navigation-expanded-width)` | -          |
| menu/gap                         | Component  | `var(--dds-menu-gap)`                       | -          |
| menu/item/gap                    | Component  | `var(--dds-menu-item-gap)`                  | -          |
| menu/item/padding/lg             | Component  | `var(--dds-menu-item-padding-lg)`           | -          |
| border/radius/sm                 | Semantic   | `var(--dds-border-radius-sm)`               | -          |
| menu/item/line-size/lg           | Component  | `var(--dds-menu-item-line-size-lg)`         | -          |
| checkbox/size/sm                 | Component  | `var(--dds-checkbox-size-sm)`               | -          |
| border/radius/xs                 | Semantic   | `var(--dds-border-radius-xs)`               | -          |
| border/width/xs                  | Semantic   | `var(--dds-border-width-xs)`                | -          |
| color/border/NEUTRAL/base        | Semantic   | `var(--dds-color-border-neutral-base)`      | #1D2C3B   |
| icon/size/sm                     | Component  | `var(--dds-icon-size-sm)`                   | -          |
| color/text/NEUTRAL/rest          | Semantic   | `var(--dds-color-text-neutral-rest)`        | #1D2C3B   |
| menu/item/padding/lg             | -          | `var(--dds-menu-item-padding-lg)`           | -          |
| border/radius/sm                 | -          | `var(--dds-border-radius-sm)`               | -          |
| border/width/lg                  | -          | `var(--dds-border-width-lg)`                | -          |
| border/width/lg                  | -          | `var(--dds-border-width-lg)`                | -          |
| menu/item/line-size/lg           | -          | `var(--dds-menu-item-line-size-lg)`         | -          |
| menu/item/indent-l2              | Internal   | `var(--dds-menu-item-indent-l2)`            | -          |
| menu/item/indent-l3              | Internal   | `var(--dds-menu-item-indent-l3)`            | -          |
| spacing/sm                       | -          | `var(--dds-spacing-sm)`                     | -          |
| button/size/md                   | -          | `var(--dds-button-size-md)`                 | -          |
| border/radius/xs                 | -          | `var(--dds-border-radius-xs)`               | -          |
| border/width/xs                  | -          | `var(--dds-border-width-xs)`                | -          |
| button/background/ghost-rest     | -          | `var(--dds-button-background-ghost-rest)`   | -          |
| button/background/ghost-rest     | -          | `var(--dds-button-background-ghost-rest)`   | #40586D00 |
| color/text/BRAND/rest            | -          | `var(--dds-color-text-brand-rest)`          | #0063B8   |
| menu/padding                     | -          | `var(--dds-menu-padding)`                   | -          |
| side-navigation/collapsed-width  | -          | `var(--dds-side-navigation-collapsed-width)`| -          |
| menu/item/gap                    | -          | `var(--dds-menu-item-gap)`                  | -          |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-side-nav--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-side-nav--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-side-nav--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-side-nav--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-sidenav--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-sidenav--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Side navigation is a hierarchical, vertical navigation component featured on the right or left side of a page or screen.

Side Navigation