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.

<div style="max-width: 350px">
<dap-ds-sidenav>
  <dap-ds-sidenav-item href="link1">
    Single item
  </dap-ds-sidenav-item>
  <dap-ds-sidenav-group>
    Simple group, no link
    <dap-ds-sidenav-item slot="submenu" href="link2">
        Group 1 sub 1
        <dap-ds-badge slot="suffix">badge</dap-ds-badge>
    </dap-ds-sidenav-item>
    <dap-ds-sidenav-item slot="submenu" href="link3">
        Group 1 sub 2
        <dap-ds-avatar src="/img/components/apples.webp" size="xxs">badge</dap-ds-avatar>
    </dap-ds-sidenav-item>
    <dap-ds-sidenav-item slot="submenu" href="link4">
        Group 1 sub 3
        <dap-ds-badge slot="suffix">badge</dap-ds-badge>
    </dap-ds-sidenav-item>
    <dap-ds-badge slot="suffix">badge</dap-ds-badge>
  </dap-ds-sidenav-group>
</dap-ds-sidenav>
</div>

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.

<div style="max-width: 350px">
<dap-ds-sidenav activeHref="link3">
  <dap-ds-sidenav-item href="link1">
    Single item
  </dap-ds-sidenav-item>
  <dap-ds-sidenav-group>
    Simple group, no link
    <dap-ds-sidenav-item slot="submenu" href="link2">
        Group 1 sub 1
        <dap-ds-badge slot="suffix">badge</dap-ds-badge>
    </dap-ds-sidenav-item>
    <dap-ds-sidenav-item slot="submenu" href="link3">
        Group 1 sub 2
        <dap-ds-avatar src="/img/components/apples.webp" size="xxs">badge</dap-ds-avatar>
    </dap-ds-sidenav-item>
    <dap-ds-sidenav-item slot="submenu" href="link4">
        Group 1 sub 3
        <dap-ds-badge slot="suffix">badge</dap-ds-badge>
    </dap-ds-sidenav-item>
    <dap-ds-badge slot="suffix">badge</dap-ds-badge>
  </dap-ds-sidenav-group>
</dap-ds-sidenav>
</div>

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.

<div style="max-width: 350px">
<dap-ds-sidenav activeHref="grouplink">
  <dap-ds-sidenav-group href="grouplink">
    Simple group as link
    <dap-ds-sidenav-item slot="submenu" href="link2">
        Group 1 sub 1
        <dap-ds-badge slot="suffix">badge</dap-ds-badge>
    </dap-ds-sidenav-item>
    <dap-ds-sidenav-item slot="submenu" href="link3">
        Group 1 sub 2
        <dap-ds-avatar src="/img/components/apples.webp" size="xxs">badge</dap-ds-avatar>
    </dap-ds-sidenav-item>
    <dap-ds-sidenav-item slot="submenu" href="link4">
        Group 1 sub 3
        <dap-ds-badge slot="suffix">badge</dap-ds-badge>
    </dap-ds-sidenav-item>
    <dap-ds-badge slot="suffix">badge</dap-ds-badge>
  </dap-ds-sidenav-group>
</dap-ds-sidenav>
</div>

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 the component by its own subpath. This registers <dap-ds-sidenav> (and the components it renders internally) and lets your bundler include only what you use:

import 'dap-design-system/components/sidenav'

Need a reference to the class (e.g. to register it manually or extend it)? The same subpath default-exports it:

import DapDSSideNav from 'dap-design-system/components/sidenav'

Register the whole library at once — convenient, but pulls every component into your bundle:

import 'dap-design-system'

import { DapDSSideNavReact } from 'dap-design-system/react'

Defaults to aside because that is what this component has always rendered, and changing the landmark of every existing sidenav is not this component's call: a sidenav that is genuinely a sidebar should stay complementary. Set nav when the sidenav is the primary way to move around the view. |

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);
}

No CSS custom properties available.

No custom events available.

aria-current has to sit on the anchor that assistive technology actually exposes. Setting it on this host does nothing: the host is a role-less custom element, so the attribute is stranded there and screen-reader users cannot tell which item is current. Use current="step" inside a stepper. | | 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 |

No custom events available.