Side navigation is a list of links that are used to navigate to different sections of a page.
The root <dap-ds-sidenav> element can contain any number of <dap-ds-sidenav-item> and <dap-ds-sidenav-group> elements. The <dap-ds-sidenav-group> element can contain any number of <dap-ds-sidenav-item> elements.
The activeHref attribute can be used to indicate the currently active item in the side navigation.
This very usefull when the page does not reloads in an SPA environment.
If this attribute is not set, the current location, window.location.pathname, will be used to determine the active item.
The active item will be automatically expanded if it is inside a group.
The <dap-ds-sidenav-group> element can be used as a menu item with a link. If the href attribute is set, the group will be rendered as a link. This is useful for index pages.
The group could be expanded still, but clicking on the group link will navigate to the specified URL.
The side navigation component can be used in NextJs with the Link component.
<dap-ds-sidenav-group>
Frameworks
<Link
href="/design-system-dev/frameworks/react"
passHref
legacyBehavior>
<dap-ds-sidenav-item slot="submenu">React</dap-ds-sidenav-item>
</Link>
</dap-ds-sidenav-group>
import { DapDSSideNav } from 'dap-design-system'
import { DapDSSideNavReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSSideNav } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
label | string | The label of the side navigation, if aria label is not provided, it will be used as aria label | |
activeHref | string | The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location | |
size | 'xs', 'sm' , 'lg' | 'xs' | The size of the side navigation |
| Name | Description |
|---|---|
(default) | The content of the side navigation. |
| Event Name | Description | Type |
|---|---|---|
dds-item-click | Event fired when the side navigation item is clicked. | {href: string, event: Event } |
| Part Name | Description |
|---|---|
base | The main side navigation container. |
menu | The menu of the side navigation. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-sidenav::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-sidenav::part(base),
.my-custom-dap-ds-sidenav::part(menu) {
/* Shared styles */
}
Example usage:
<dap-ds-sidenav class="my-custom-dap-ds-sidenav">
Side navigation
</dap-ds-sidenav>
.my-custom-dap-ds-sidenav::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
No CSS custom properties available.
| Property | Type | Default | Description |
|---|---|---|---|
href | string | The href of the side navigation item | |
active | boolean | false | Whether the side navigation item is active |
spacing | 'top', 'bottom' , 'both' , 'none' | 'none' | The spacing of the side navigation item |
open | boolean | false | Whether the side navigation group is open |
size | 'xs', 'sm' , 'lg' | 'xs' | The size of the side navigation group |
| Name | Description |
|---|---|
(default) | The content of the side navigation group. |
submenu | The submenu of the side navigation group. |
suffix | The suffix of the side navigation group. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main side navigation group container. |
title | The title of the side navigation group. |
link | The link of the side navigation group. |
toggle | The toggle button of the side navigation group. |
submenu | The submenu of the side navigation group. |
| Property Name | Description |
|---|---|
--dds-sidenav-group-margin-bottom | Default bottom margin of the sidenav group (default: var(--dds-spacing-100)) |
--dds-sidenav-group-border-radius | Border radius of the sidenav group (default: var(--dds-radius-base)) |
--dds-sidenav-group-spacing-margin | Margin used for spacing variants (default: var(--dds-spacing-400)) |
--dds-sidenav-group-item-min-height-xs | Minimum height of the sidenav group item (default: var(--dds-spacing-800)) |
--dds-sidenav-group-item-min-height-sm | Minimum height of the sidenav group item (default: var(--dds-spacing-1000)) |
--dds-sidenav-group-item-min-height-lg | Minimum height of the sidenav group item (default: var(--dds-spacing-1200)) |
--dds-sidenav-group-item-padding-xs | Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300)) |
--dds-sidenav-group-item-padding-sm | Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400)) |
--dds-sidenav-group-item-padding-lg | Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500)) |
--dds-sidenav-group-item-color | Text color of the sidenav group item (default: var(--dds-text-neutral-base)) |
--dds-sidenav-group-item-font-size-xs | Font size of the sidenav group item (default: var(--dds-font-sm)) |
--dds-sidenav-group-item-font-size-sm | Font size of the sidenav group item (default: var(--dds-font-base)) |
--dds-sidenav-group-item-font-size-lg | Font size of the sidenav group item (default: var(--dds-font-lg)) |
--dds-sidenav-group-item-font-weight | Font weight of the sidenav group item (default: var(--dds-font-weight-medium)) |
--dds-sidenav-group-item-bg-active | Background color when the item is active (default: var(--dds-transparent-black-subtle)) |
--dds-sidenav-group-item-bg-hover | Background color on hover and active states (default: var(--dds-transparent-black-base)) |
--dds-sidenav-group-toggle-margin | Margin for the toggle button (default: var(--dds-spacing-300)) |
--dds-sidenav-group-submenu-padding | Padding for the submenu (default: var(--dds-spacing-300) 0) |
| Property | Type | Default | Description |
|---|---|---|---|
href | string | The href of the side navigation item | |
active | boolean | false | Whether the side navigation item is active |
spacing | 'top', 'bottom' , 'both' , 'none' | 'none' | The spacing of the side navigation item |
size | 'xs', 'sm' , 'lg' | 'xs' | The size of the side navigation item |
| Name | Description |
|---|---|
(default) | The content of the side navigation item. |
suffix | The suffix of the side navigation item. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main side navigation item container. |
link | The link of the side navigation item. |
| Property Name | Description |
|---|---|
--dds-sidenav-item-min-height-xs | Minimum height of the sidenav item (default: var(--dds-spacing-800)) |
--dds-sidenav-item-min-height-sm | Minimum height of the sidenav item (default: var(--dds-spacing-1000)) |
--dds-sidenav-item-min-height-lg | Minimum height of the sidenav item (default: var(--dds-spacing-1200)) |
--dds-sidenav-item-margin-bottom | Default bottom margin of the sidenav item (default: var(--dds-spacing-100)) |
--dds-sidenav-item-padding-xs | Padding of the sidenav item (default: var(--dds-spacing-100) var(--dds-spacing-300)) |
--dds-sidenav-item-padding-sm | Padding of the sidenav item (default: var(--dds-spacing-200) var(--dds-spacing-400)) |
--dds-sidenav-item-padding-lg | Padding of the sidenav item (default: var(--dds-spacing-300) var(--dds-spacing-500)) |
--dds-sidenav-item-radius | Border radius of the sidenav item (default: var(--dds-radius-base)) |
--dds-sidenav-item-color | Text color of the sidenav item (default: var(--dds-text-neutral-base)) |
--dds-sidenav-item-font-size-xs | Font size of the sidenav item (default: var(--dds-font-sm)) |
--dds-sidenav-item-font-size-sm | Font size of the sidenav item (default: var(--dds-font-base)) |
--dds-sidenav-item-font-size-lg | Font size of the sidenav item (default: var(--dds-font-lg)) |
--dds-sidenav-item-font-weight | Font weight of the sidenav item (default: var(--dds-font-weight-medium)) |
--dds-sidenav-item-spacing-margin | Margin used for spacing variants (default: var(--dds-spacing-400)) |
--dds-sidenav-item-bg-active | Background color when the item is active (default: var(--dds-transparent-black-subtle)) |
--dds-sidenav-item-bg-hover | Background color on hover and active states (default: var(--dds-transparent-black-base)) |
