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
Angular
Vue.js

// 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"

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

<dhl-sidenav></dhl-sidenav>

// 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
Angular
Vue.js

<DhlSidenav
  appName="Express"
  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>

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

<dhl-sidenav
  appName="Express"
  :logo="{
    title: 'Express',
    alt: 'Express',
    href: 'https://www.google.com/',
    external: '_blank'
  }"
  :mainItems="mainItems"
  :bottomItems="bottomItems"
></dhl-sidenav>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
`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[]`	`[]`

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Import

Code​

Interactive Demo​

Readme​

Properties​

Dependencies​

Depends on​

Graph​