Sidenav

The Sidenav component is a collapsible vertical navigation menu for app layouts, ideal for organizing primary sections and saving space. Use the collapsed variant to minimize the sidebar, showing only icons, and expand it for full text labels. Ensure the component is placed within a flexible container that adjusts to its width changes.

Import

React

// with @dhl-official/react-library:
import { DhlSidenav } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlSidenav } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-sidenav></dhl-sidenav>

Vue.js

// with @dhl-official/vue-library:
import { DhlSidenav } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlSidenav } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlSidenav
  appName="Express"
  activeIndex="main.0"
  onDhlActiveIndexChange={(e) => setActiveIndex(e.detail)}
  logo={{
    title: "Express",
    alt: "Express",
    href: "https://www.dhl.com/",
    external: "_blank",
  }}
  mainItems={[
    {
      label: "Nav Item",
      icon: icons.PlaneTakeOff,
      isPrimary: true,
      items: [
        { label: "Sub Item" },
        { label: "Sub Item" },
        { label: "Sub Item" },
      ],
    },
    {
      label: "Nav Item",
      icon: icons.Parcel,
      items: [
        { label: "Sub Item" },
        { label: "Sub Item" },
        { label: "Sub Item" },
      ],
    },
    {
      label: "Nav Item",
      icon: icons.LiveTracking,
      items: [
        { label: "Sub Item" },
        { label: "Sub Item" },
        { label: "Sub Item" },
      ],
    },
    {
      label: "Nav Item",
      icon: icons.DeliveryVan,
      items: [
        { label: "Sub Item" },
        { label: "Sub Item" },
        { label: "Sub Item" },
      ],
    },
    {
      label: "Nav Item",
      icon: icons.CurrencyChange,
      items: [
        { label: "Sub Item" },
        { label: "Sub Item" },
        { label: "Sub Item" },
      ],
    },
    {
      label: "Nav Item",
      icon: icons.EmergingMarketSolutions,
    },
    {
      label: "Nav Item",
      icon: icons.Group,
    },
  ]}
  bottomItems={[
   {
     label: "Nav Item",
     icon: icons.LocationPin,
   },
   {
     label: "Nav Item",
     icon: icons.Questionmark,
   },
  ]}
></DhlSidenav>

Angular

<dhl-sidenav
  [appName]="'Express'"
  [activeIndex]="activeIndex"
  (dhlActiveIndexChange)="activeIndex = $event.detail"
  [logo]="{
    title: 'Express',
    alt: 'Express',
    href: 'https://www.dhl.com/',
    external: '_blank'
  }"
  [mainItems]="mainItems"
  [bottomItems]="bottomItems"
></dhl-sidenav>

Vue.js

<dhl-sidenav
  appName="Express"
  :activeIndex="activeIndex"
  @dhl-active-index-change="activeIndex = $event.detail"
  :logo="{
    title: 'Express',
    alt: 'Express',
    href: 'https://www.google.com/',
    external: '_blank'
  }"
  :mainItems="mainItems"
  :bottomItems="bottomItems"
></dhl-sidenav>

Type Definitions

DhlSideNavOptionType

type DhlSideNavOptionType = {
  label: string;
  icon?: string;           // SVG string from @dhl-official/icons
  isPrimary?: boolean;     // Pins item above the scrollable list with a divider
  clickEvent?: () => void; // Called on item click in addition to internal navigation
  items?: DhlSideNavSubItemType[];
};

type DhlSideNavSubItemType = {
  label: string;
  clickEvent?: () => void;
};

ItemLink (used by the logo prop)

type ItemLink = {
  href?: string;
  title?: string;
  external?: boolean;
  clickEvent?: (e: Event) => void;
};

// logo prop type:
type LogoProp = ItemLink & { alt: string };

activeIndex format

The activeIndex prop uses dot-notation to identify navigation items:

Value	Meaning
"main.0"	First item in the main list
"main.1"	Second item in the main list
"main.0.0"	First sub-item of the first main item
"main.0.1"	Second sub-item of the first main item
"bottom.0"	First bottom item
"bottom.1"	Second bottom item

Note: the item marked isPrimary: true is rendered outside the scrollable list and has no activeIndex value.

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
activeIndex	active-index	An optional prop to control the currently active navigation item from the parent. Uses dot-notation: "main.0", "main.1.0" (sub-item), "bottom.0". Mutable — updated internally on click so the reflected attribute always mirrors the current state.	string	""
allowMultipleDrawersToggle	allow-multiple-drawers-toggle	An optional flag to define if component can toggle multiple drawers at the same time.	boolean	false
appName	app-name	If present shows the application name next to the DHL logo.	string	undefined
bottomItems	bottom-items	An optional prop to pass the list of bottom navigation items.	DhlSideNavOptionType[]	[]
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
isCollapsed	is-collapsed	An optional prop to define if component is in collapsed state.	boolean	false
logo	logo	This is optional prop of the below shape that controls the behavior of the DHL Logo i.e. the title, alternate text, href etc.	ItemLink & { alt: string; }	undefined
mainItems	main-items	An optional prop to pass the list of main navigation items.	DhlSideNavOptionType[]	[]

Events

Event	Description	Type
dhlActiveIndexChange	Emitted whenever the active navigation item changes (via click or external prop update). event.detail contains the new activeIndex string.	CustomEvent<string>

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon
• dhl-text
• dhl-link
• dhl-content-scrollbar

Graph

---

Built by DHL User Interface Library Team!