<h2>When to use</h2>
<p>Category navigation, tabs, links, and button are not used for the same purpose. Ensure the component you are using matches the desired use case, to create an accessible experience for all users.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Category navigation</td>
<td>Guides users through related content by switching views, narrowing sections, redirecting to other pages, or anchoring within the same page. It does not trigger actions.</td>
</tr>
<tr>
<td>Tabs</td>
<td>Organizes and switch between distinct sections of related content within the same context. Can be horizontal or vertical.</td>
</tr>
<tr>
<td>Link</td>
<td>Navigates to another page, external site, or a specific section on the same page. Can open in a new tab.</td>
</tr>
<tr>
<td>Button</td>
<td>Use to trigger an action on a page or to complete tasks in other components, such as forms and modals. Exception: “Back” and “Next” buttons may be used to navigate a guided experience.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<h3>Desktop, tablet, and mobile (anchor case)</h3>
<details data-name='image-block' data-images='[{"alt":"Category navigation component displaying its four elements.","caption":"Category navigation component contains up to four elements:\n\n1. **Category strip:** \n   horizontal container that holds all pills.\n2. **Pill:** \n   clickable item used to switch views, redirect, or anchor.\n3. **Label:** \n   text inside the pill that describes the category.\n4. **Chevron for horizontal scroll:** \n   arrows used to scroll the category strip when items overflow the container.","url":"https://dds.dell.com/site/components/category-navigation/categorynavigation-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h3>Mobile</h3>
<details data-name='image-block' data-images='[{"alt":"Category navigation dropdown component displaying its three elements.","caption":"\nCategory navigation dropdown component contains three elements:\n\n1. **Category dropdown:** dropdown that opens the list of category options.\n2. **Dropdown list items:** menu displaying all available category navigation options.\n3. **Label:** text describing each category option in the list.","url":"https://dds.dell.com/site/components/category-navigation/categorynavigation-anatomy-mobile.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/category-names-suck/","type":"External","ariaLabel":""},"title":"Category Names","description":"Read the Nielsen Norman Group&#39;s article on category names.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/navigation-you-are-here/","type":"External","ariaLabel":""},"title":"Navigation: You Are Here","description":"Read the Nielsen Norman Group&#39;s article on navigation.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='3' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use the category navigation component to guide users as they explore related or grouped content. This component **switches content views, narrows down sections, redirects to other pages, or anchors to different sections within the same page**. It does not support multiple selection.

It’s recommended to use only one use case of this component within a single experience, as introducing multiple types can lead to user confusion.

Avoid using category navigation to trigger actions. When users need to perform actions or interact with content, use buttons or other action-based components instead. Refer to [when to use](https://www.delldesignsystem.com/components/category-navigation#when-to-use) section to identify the most appropriate component for your scenario.

If users need to view all content sets at once, consider applying an alternate view for the page content.

### Switch content view

Category navigation allows users to switch content views within a page or a specific section. It can be used to toggle between different categories or data perspective without leaving the current context. It works within sections, supporting both page-level and in-page navigation.

**Usage examples:**

* Switch between views such as “Product,” “Accessories,” and “Software” within a laptop product detail page.
* Toggle between data views such as “Monthly,” “Quarterly,” and “Yearly” performance in an analytics dashboard.

<details data-name='image-block' data-images='[{"alt":"Usage example of the category navigation component used to switch content views.","caption":"Usage example of the category navigation component used to switch content views.","url":"https://dds.dell.com/site/components/category-navigation/switch-content-view.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Narrow down content

Category navigation can narrow down content within a section, helping users focus on a specific portion of the content. This is useful when a section contains large amounts of content, and users want to view just a part of it. It works within sections, supporting both page-level and in-page navigation.

**Usage examples:**

* Narrow down content by selecting a specific category, such as “Articles”, “Videos”, or “Podcasts” within a media library.
* Filter products by selecting categories such as “Laptops”, “Monitors”, or “Accessories” to quickly focus on relevant items.

<details data-name='image-block' data-images='[{"alt":"Usage example of the category navigation component allowing users to narrow down content.","caption":"Usage example of the category navigation component allowing users to narrow down content.","url":"https://dds.dell.com/site/components/category-navigation/narrow-down-content.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Redirect or anchor

Category navigation can redirect users to other pages or anchor them to different sections within the same page. This is useful to help users jump to specific sections without scrolling. It works within sections, supporting both page-level and in-page navigation.

**Usage examples:**

* Redirect to product categories like “Gaming” or “Business” on a tech e-commerce site.
* Anchor to dashboard sections such as “Revenue,” “Expenses,” and “Forecasting” in a financial application.

<details data-name='image-block' data-images='[{"alt":"Usage example of the category navigation component on Dell.com. It redirects users to product categories, switching the page content accordingly.","caption":"Usage example of the category navigation component on Dell.com. It redirects users to product categories, switching the page content accordingly.","url":"https://dds.dell.com/site/components/category-navigation/anchor.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

There are two different kinds for category navigation component:

* **Singular:** use it as a default category navigation component for desktop and tablet
* **Dropdown**: use it on mobile devices

### Singular (default)

The singular kind is the default category navigation. It is horizontal and works across all screen sizes. This kind supports single selection. Selecting a pill immediately **updates the displayed content**.

The component enables horizontal scrolling when the number of categories exceeds the available space. Directional chevrons indicate overflow and help users navigate.

**Use case:**

* On desktop and tablet, the singular kind can be used for **all use cases**.
* On mobile, the singular kind is only for **anchoring**.

Refer to [usage](https://www.delldesignsystem.com/components/category-navigation/?tab=Design#design-usage) to read more about use cases and anchoring use.

<details data-name='image-block' data-images='[{"alt":"Example of the singular kind category navigation with horizontal scrolling and directional chevrons.","caption":"Example of the singular kind category navigation with horizontal scrolling and directional chevrons.","url":"https://dds.dell.com/site/components/category-navigation/categorynavigation-kinds.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Dropdown (mobile only)

Use the dropdown kind **exclusively on mobile devices** to optimize space and usability. Apply this kind when screen space is limited and a compact, touch-friendly control is required.

**Use case:**

* On mobile, the dropdown behaves like singular kind but **does not support anchoring**.

Refer to [usage](https://www.delldesignsystem.com/components/category-navigation/?tab=Design#design-usage) to read more about use cases and anchoring use.

<details data-name='image-block' data-images='[{"alt":"Example of the dropdown kind of the category navigation, used on mobile devices.","caption":"Example of the dropdown kind of the category navigation, used on mobile devices.","url":"https://dds.dell.com/site/components/category-navigation/kinds-mobile.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Layout

**Icons are not supported** in any of the category navigation component layouts. Avoid using icons, as they are not a defined kind and may introduce accessibility issues.

### Sticky with overlay

Use an overlay to visually elevate the component when category navigation is the only content in the container. This layout keeps the navigation **fixed at the top of the viewport** during scrolling.

<details data-name='image-block' data-images='[{"alt":"Example of sticky category navigation using overlay.","caption":"Example of sticky category navigation using overlay.","url":"https://dds.dell.com/site/components/category-navigation/overlay.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Sticky with solid background

Use a solid background when category navigation **shares space with other content in the container**. This layout ensures visual separation without elevation, maintaining clarity in mixed-content sections.

<details data-name='image-block' data-images='[{"alt":"Example of sticky category navigation using solid background. ","caption":"Example of sticky category navigation using solid background.","url":"https://dds.dell.com/site/components/category-navigation/solid.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Overlay and elevation

Apply [overlay](https://www.delldesignsystem.com/components/overlay) with background blur and elevation to enhance depth and focus. This layout is ideal when the **component needs to stand out** against dynamic or layered backgrounds.

<details data-name='image-block' data-images='[{"alt":"Example of category navigation using overlay and elevation.","caption":"Example of category navigation using overlay and elevation.","url":"https://dds.dell.com/site/components/category-navigation/overlay---elevation.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behavior and states

Category navigation pills respond to user interaction and display visual changes based on their state. Pills communicate six states: selected, rest, hover, pressed, active focus, and rest focus. Each state is reflected through changes in color, outline, and/or opacity.

Behavior and states may differ between the singular and dropdown kinds, depending on platform and interaction patterns.

#### Singular

<details data-name='image-block' data-images='[{"alt":"Image indicating category navigation visual states.","caption":"","url":"https://dds.dell.com/site/components/category-navigation/categorynavigation-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State        | Behavior                                                                                                                                                   |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Selected     | Indicates the active category. Selecting a pill updates the content, redirects the user to a new page, or to a section within the same page.               |
| Rest         | Default appearance before any interaction.                                                                                                                 |
| Hover        | Appears when a user hovers over a pill with a pointer device.                                                                                              |
| Pressed      | Appears while a pill is being clicked or tapped.                                                                                                           |
| Active focus | Pill is selected, focused, and ready for activation via keyboard. A blue outline appears when a user navigates to a focused pill using keyboard controls.  |
| Rest focus   | Pill is focused but not selected. Shows a visible focus indicator. A blue outline appears when a user navigates to a focused pill using keyboard controls. |

#### Dropdown (mobile only)

<details data-name='image-block' data-images='[{"alt":"Image indicating category navigation dropdown visual states.","caption":"","url":"https://dds.dell.com/site/components/category-navigation/categorynavigation-interaction-mobile.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State   | Behavior                                                                                                                                                             |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Active  | A category is selected and the dropdown may be opened or closed.                                                                                                     |
| Hover   | When the user hovers over a category option, background color changes to Blue 700.                                                                                   |
| Pressed | When the user clicks or taps an option, background color changes to Blue 800.                                                                                        |
| Focused | The selected dropdown is focused using keyboard or assistive technology. A blue outline appears when a user navigates to a focused category using keyboard controls. |

## Standards

### Accessibility

**Ensure clear and descriptive labels**

Each category item, whether a singular or a dropdown kind, must have a unique and descriptive label that clearly communicates its purpose. Avoid vague labels like “Item 1” or “More.” Screen reader users often navigate by listing all interactive elements, so clarity is essential.

WCAG 2.2: [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html), [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html)

**Respect expected interaction patterns**

The singular kind behaves similarly to tabs and should follow familiar navigation patterns. Users must be able to move between pills using arrow keys and activate them with Enter or Space. The dropdown kind should behave like a standard mobile dropdown, supporting tap and swipe interactions.

WCAG 2.2: [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html), [2.1.2 No Keyboard Trap](https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html)

**Ensure visible focus states**

Interactive elements in the Category Navigation component must show a clear visual focus state. This helps keyboard and screen reader users understand where they are in the interface.

WCAG 2.2: [2.4.7 Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html), [2.4.13 Focus Appearance](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html)

### Content

Components must adhere to the standards published in [Dell Unified Style Guide (USG)](https://dell.sharepoint.com/sites/DellTechnologiesUnifiedStyleGuide/SitePages/Home.aspx?csf=1&web=1&e=mMJT0e&CID=29083aec-1b30-4313-80fa-852ac3cc610b). Refer to this resource for detailed guidance.

**Capitalization**

Use sentence case (capitalize only the first word), unless referring to a proper noun.

**Punctuation**

Do not punctuate labels. Use the serial comma (Oxford comma) to separate three or more items in a series.

**Labels length**

Keep label text to a maximum of three words. Use plain language that clearly describes the content associated with each category navigation item.

**Symbols and initials**

Spell out symbols and initials that represent words. Avoid using the ampersand symbol (&) to prevent accessibility issues for screen reader users.

Category navigation helps users explore related content by switching views, redirecting to other pages, or anchoring to sections within the same page. 

Category Navigation

React update

<p>The DDS React library now contains all components available in the Angular and Vanilla component libraries.</p>
