Side navigation is a hierarchical, vertical navigation component featured on the right or left side of a page or screen.
| PublishedElement can be used in production | |
| PublishedElement can be used in production | |
Angular | In backlogElement is in backlog |
| ExperimentalElement offered for testing and feedback. Not intended for use in production. | |
Documentation | PublishedElement can be used in production |
The Dell Design System’s new side navigation component is both scalable and configurable. This component works well for web-based productivity applications, including product lines that may need persistent navigation to guide users through the experience. In this iteration, additional secondary and tertiary levels have been added to make the navigation component more versatile.
The side navigation component is made up of links, icons, chevrons, and primary, secondary, and tertiary levels, along with a slide out panel.
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.
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 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; it will be visible under a menu.
Example of how side navigation stays open in the fixed view, showing all primary navigation options when a user first visits a website.
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 to illustrate navigation choices during collapsed mode.
Side navigation panel in collapsed and expanded view, with a focus on the chevron that opens and closes the panel.
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.
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 for navigation:
The side navigation component can also be used without icons and just text 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 on this page.
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.
Selecting a primary group reveals the secondary page levels. Secondary groups function similarly, in that selecting the page drops down tertiary page levels.
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.
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.
In its fixed or expanded state, side navigation is 280 pixels wide. When collapsed, it’s 60 pixels wide.
There are three grids used in side navigation component:
Beyond the expand and collapse behavior of side navigation, users will experience different states during page selection.
A: at rest, navigation text is lighter in color and the background remains white. If there are additional levels of navigation, an upturned chevron appears.
B: when a user hovers over a link, the background turns light blue and the text darkens.
C: when a user selects a page, the background turns dark gray, and a blue marker line appears to the left (or right in the right side navigation). The text turns also turns a shade darker. The selected item will remain active until the user navigates to another page.
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.
An example of how a scrollbar appears to the right of navigation, when page levels extend the screen height.
If navigation items have longer titles, the text wraps to the next line, and all the padding between items remains the same. However, it’s best to avoid long titles and not wrap text. In general, text should be scannable and succinct.
In this view, a long page title wraps under the text element in side navigation.
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.
A demonstration of how a 6-column grid would automatically display the side navigation in the collapsible view.
Along with white, these colors are used in the side navigation component.
| Color | Use cases | Hex |
|---|---|---|
| Gray 800 | Inactive text and icon color | #636363 |
| Gray 900 | Active text | #0E0E0E |
| Gray 100 | Secondary and tertiary background | #F5F6F7 |
| Blue 100 | Hover state | #D9F5FD |
| Blue 700 | Active border marker | #0063B8 |
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 and Storybook Demo for React
WCAG 2.1: 1.3.1 Info and Relationships
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 help users with information scent, make sure page titles match navigation links.
Capitalization
Use sentence case in navigation links.
This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.
<section class="dds__side-nav__wrapper" data-dds="side-nav">
<nav class="dds__side-nav" aria-label="Main Navigation">
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<i class="dds__icon dds__icon--home"></i>
<span>Home</span>
</a>
</li>
<li class="dds__side-nav__group">
<button type="button" aria-haspopup="true" aria-expanded="false">
<i class="dds__icon dds__icon--toolbox"></i>
<span>Getting Started</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__group">
<button type="button" aria-haspopup="true" aria-expanded="false">
<span>Components</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Vanilla</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Web Components</span>
</a>
</li>
</ul>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Figma</span>
</a>
</li>
</ul>
</li>
<li class="dds__side-nav__group">
<button type="button" aria-haspopup="true" aria-expanded="false">
<i class="dds__icon dds__icon--puzzle"></i>
<span>Updates</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Component Status</span>
</a>
</li>
</ul>
</li>
<li class="dds__side-nav__group">
<button aria-haspopup="true" aria-expanded="false">
<i class="dds__icon dds__icon--stack"></i>
<span>Foundations</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Color</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Elevation</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Grid</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Typography</span>
</a>
</li>
</ul>
</li>
<li class="dds__side-nav__group">
<button aria-haspopup="true" aria-expanded="false">
<i class="dds__icon dds__icon--objects"></i>
<span>Components</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Badge</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Banner</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Breadcrumb</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Button</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Card</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Carousel</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Checkbox</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Divider & Container</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Drawer</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Dropdown</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Filter</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Footer</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Form</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Link</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>List</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Loading Icon</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Masthead</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Message Bar</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Modal</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Nav</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Notification</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Pagination</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Popover</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Product Stack</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Progress</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Radio Button</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Rating</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Select</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>ShowHide</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Side Nav</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Slider</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Tab</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Table</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Tag</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Tooltip</span>
</a>
</li>
</ul>
</li>
<li class="dds__side-nav__group">
<button type="button" aria-haspopup="true" aria-expanded="false">
<i class="dds__icon dds__icon--puzzle"></i>
<span>Pattern</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Side Navigation</span>
</a>
</li>
</ul>
</li>
<li class="dds__side-nav__group">
<button type="button" aria-haspopup="true" aria-expanded="false">
<i class="dds__icon dds__icon--headset"></i>
<span>Contact</span>
</button>
<ul class="dds__side-nav__menu">
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Send Feedback</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Find us on Teams</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Email us</span>
</a>
</li>
<li class="dds__side-nav__item">
<a href="javascript:void(0)">
<span>Contribute to DDS</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="dds__side-nav__toggle">
<button type="button" aria-label="collapse side navigation">
<i class="dds__icon dds__icon--chevron-left"></i>
</button>
<button type="button" aria-label="expand side navigation">
<i class="dds__icon dds__icon--chevron-right"></i>
</button>
</div>
</section>