Navbar

caution

This component is currently under development and may be subject to updates and changes in layout, APIs, and interfaces**

The Navbar component can be used to provide easy navigation for users to access different sections of a website or application from a centralized location at the top of the page.

Import

React
Angular
Vue.js

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

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

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

<dhl-navbar></dhl-navbar>

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

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

Code

React
Angular
Vue.js

<DhlNavbar logo={logo}></DhlNavbar>

<dhl-navbar [logo]="logo"></dhl-navbar>

<dhl-navbar :logo.prop="logo"></dhl-navbar>

Slots

The primary-action slot is available to set custom elements on the right-side of the NavBar. This slot can only be used if primaryMetaItems, searchData, countryData and languageData are unset.

Please note: currently, you can only pass a string to the popover field within primaryNavigationItems.

Please note: should the items field within the mobileNavigationItems prop be undefined, the NavBar will automatically generate the mobile menu using primaryNavigationItems and the headline field as navigation copy.

To create nested mobile drawers, use the linkList field within the supplied mobile to any mobileNavigationItems item. To set a headline or text to accompany the back arrow icon, use the values "headline" and "backBtn" for the type field respectively.

For example:

{
  copy: "Navigation Level 1",
  href: "#",
  title: "",
  id: "1",
  external: false,
  type: "list",
  linkList: [
    {
      copy: "Back",
      href: "#",
      id: "1-1",
      title: "",
      external: false,
      type: "backBtn",
    },
    {
      copy: "Item 1",
      href: "#",
      id: "1-2",
      title: "",
      external: false,
      type: "headline",
    },
    {
      copy: "Item 2",
      href: "#",
      id: "1-3",
      title: "",
      external: false,
      type: "list",
      dataLevel: "5-1",
      linkList: [
        {
          copy: "Back",
          href: "#",
          id: "1-3-1",
          title: "",
          external: false,
          type: "backBtn",
        },
        {
          copy: "Item 3 ",
          href: "#",
          id: "1-3-2",
          title: "",
          external: false,
          type: "headline",
        },
      ],
    },
  ],
};

Interactive Demo

Example

Minimal version with Logo only

Example 1 Code Snippet (react)

<DhlNavbar
  logo={{
    href: "#",
    title: "DHL - Excellence. Simply. Delivered",
    external: false,
    alt: "DHL Logo",
  }}
></DhlNavbar>

Example 2

Version with Primary and Secondary Navigation, Search and Mobile View

Example 2 Code Snippet (react)

<DhlNavbar
  logo={{
    href: "#",
    title: "DHL - Excellence. Simply. Delivered",
    external: false,
    alt: "DHL Logo",
  }}
  primaryNavigationItems={[
    {
      headline: "All Products and Solutions",
      href: "#",
      title: "",
      external: false,
      popover: "This is All Products and Solutions Popover",
    },
    {
      headline: "Our Divisions",
      href: "http://www.example.com",
      title: "",
      external: false,
      popover: "This is Our divisions Popover",
    },
    {
      headline: "Industry Sectors",
      href: "#",
      title: "",
      external: false,
    },
    {
      headline: "Insights & Innovation",
      href: "#",
      title: "",
      external: false,
    },
    {
      headline: "Careers",
      href: "#",
      title: "",
      external: false,
      popover: "This is Careers Popover",
    },
    { headline: "Press", href: "#", title: "", external: false },
    { headline: "About Us", href: "#", title: "", external: false },
  ]}
  secondaryNavigationItems={[
    {
      headline: "Air Freight",
      href: "http://www.example.com",
      title: "",
      external: false,
    },
    {
      headline: "Ocean Freight",
      popover: "This is Ocean Freight Popover",
      href: "http://www.example.com",
      title: "",
      external: false,
    },
    { headline: "Road Freight", href: "#", title: "", external: false },
    {
      headline: "Rail Freight",
      href: "http://www.example.com",
      title: "",
      external: false,
    },
    {
      headline: "Customs",
      href: "http://www.example.com",
      title: "",
      external: false,
    },
    {
      headline: "Test",
      href: "http://www.example.com",
      title: "",
      external: false,
    },
  ]}
  secondaryHeadline={{
    copy: "All Products and Solutions",
    href: "#",
    title: "",
    external: false,
  }}
  searchData={{
     copy: "Search",
     href: "https://www.dhl.com/global-en/home/search.html",
     title: "Search",
     external: true,
  }}
  mobileNavigationItems={{
    items: [
      {
        copy: "DHL",
        href: "#",
        title: "",
        external: false,
        type: "headline",
        id: "1",
      },
      {
        copy: "Our Divisions",
        href: "#",
        id: "2",
        title: "",
        external: false,
        type: "list",
        linkList: [
          {
            copy: "Back",
            href: "#",
            id: "2-1",
            title: "",
            external: false,
            type: "backBtn",
          },
        ],
      },
      {
        copy: "All Products & Solutions",
        href: "#",
        id: "3",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "Industry Sectors",
        href: "http://www.example.com",
        title: "",
        id: "4",
        external: false,
        type: "list",
      },
      {
        copy: "Insights & Innovations",
        href: "#",
        id: "5",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "About us",
        href: "#",
        title: "",
        id: "6",
        external: false,
        type: "list",
        linkList: [
          {
            copy: "Back",
            href: "#",
            id: "6-1",
            title: "",
            external: false,
            type: "backBtn",
          },
          {
            copy: "About us",
            href: "#",
            id: "6-2",
            title: "",
            external: false,
            type: "headline",
          },
          {
            copy: "Company",
            href: "#",
            id: "6-3",
            title: "",
            external: false,
            type: "list",
            dataLevel: "5-1",
            linkList: [
              {
                copy: "Back",
                href: "#",
                id: "6-3-1",
                title: "",
                external: false,
                type: "backBtn",
              },
              {
                copy: "Company",
                href: "#",
                id: "6-3-2",
                title: "",
                external: false,
                type: "headline",
              },
              {
                copy: "Partnerships",
                href: "#",
                id: "6-3-3",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "Global Network",
                href: "#",
                id: "6-3-4",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "Vision",
                href: "#",
                id: "6-3-5",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "Responsibility",
                href: "#",
                id: "6-3-6",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "People",
                href: "#",
                id: "6-3-7",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "People",
                href: "#",
                id: "6-3-8",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "People",
                href: "#",
                id: "6-3-9",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "People",
                href: "#",
                id: "6-3-10",
                title: "",
                external: false,
                type: "list",
              },
              {
                copy: "People",
                href: "#",
                id: "6-3-11",
                title: "",
                external: false,
                type: "list",
              },
            ],
          },
        ],
      },
      {
        copy: "Item 2",
        href: "#",
        id: "7",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "Item 3",
        href: "#",
        id: "8",
        title: "",
        external: false,
        type: "list",
      },
    ],
    searchUrl: "https://www.dhl.com/in-en/home/search.html",
    languageUrl: "https://www.dhl.com/in-en/home/location-selector.html",
  }}
></DhlNavbar>

Example 3

Version with metaItems, countryData and languageData

Example 3 Code Snippet (react)

<DhlNavbar
   logo={{
    href: "#",
    title: "DHL - Excellence. Simply. Delivered",
    external: false,
    alt: "DHL Logo",
  }}
  primaryMetaItems={[
    {
      copy: "Contact Us",
      href: "#",
      title: "Contact Us",
      external: false,
    },
    {
      copy: "Portal Login",
      href: "#",
      title: "Portal Login",
      external: true,
    },
    {
      copy: "Internal Link",
      href: "#",
      title: "Internal Link",
      external: true,
    },
  ]}
  mobileNavigationItems={
    items: [
      {
        copy: "DHL",
        href: "#",
        title: "",
        external: false,
        type: "headline",
        id: "1",
      },
      {
        copy: "Contact Us",
        href: "#",
        id: "2",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "Portal Login",
        href: "#",
        id: "3",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "External Login",
        href: "#",
        id: "4",
        title: "",
        external: true,
        type: "list",
      },
    ],
    searchUrl: "https://www.dhl.com/in-en/home/search.html",
    languageUrl: "https://www.dhl.com/in-en/home/location-selector.html",
  }
  countryData={{
    copy: "United Kingdom",
    href: "https://www.dhl.com/gb-en/home/location-selector.html",
    title: "Country Selector",
    external: false,
  }}
  languageData={[
    {
      copy: "EN",
      href: "/en-en/home.html",
      title: "English",
      isSelected: true,
    },
    {
      copy: "FR",
      href: "/fr-fr/home.html",
      title: "French",
      external: false,
      isSelected: false,
    },
  ]}
></DhlNavbar>

Example 4

Version with a slotted action element

Slotted Element

Example 4 Code Snippet (react)

<DhlNavbar
   logo={{
    href: "#",
    title: "DHL - Excellence. Simply. Delivered",
    external: false,
    alt: "DHL Logo",
  }}
  primaryMetaItems={[
    {
      copy: "Contact Us",
      href: "#",
      title: "Contact Us",
      external: false,
    },
    {
      copy: "Portal Login",
      href: "#",
      title: "Portal Login",
      external: true,
    },
    {
      copy: "Internal Link",
      href: "#",
      title: "Internal Link",
      external: true,
    },
  ]}
  mobileNavigationItems={{
    items: [
      {
        copy: "DHL",
        href: "#",
        title: "",
        external: false,
        type: "headline",
        id: "1",
      },
      {
        copy: "Contact Us",
        href: "#",
        id: "2",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "Portal Login",
        href: "#",
        id: "3",
        title: "",
        external: false,
        type: "list",
      },
      {
        copy: "External Login",
        href: "#",
        id: "4",
        title: "",
        external: true,
        type: "list",
      },
    ],
    searchUrl: "https://www.dhl.com/in-en/home/search.html",
    languageUrl: "https://www.dhl.com/in-en/home/location-selector.html",
  }}
  countryData={{
    copy: "United Kingdom",
    href: "https://www.dhl.com/gb-en/home/location-selector.html",
    title: "Country Selector",
    external: false,
  }}
  languageData={[
    {
      copy: "EN",
      href: "/en-en/home.html",
      title: "English",
      isSelected: true,
    },
    {
      copy: "FR",
      href: "/fr-fr/home.html",
      title: "French",
      external: false,
      isSelected: false,
    },
  ]}
>
  <DhlButton variant="outline" size="sm" slot="primary-action">
    Slotted Element
  </DhlButton>
</DhlNavbar>

Migrating from DUIL 1.0

The popover prop now takes a string instead of a (popover) node
Remove navActions
SearchData simplified to a link - to be refactored once designs updated
If items are not supplied to the mobileNavigationItems prop, Navbar will auto-generate items based on primaryNavigationItems and the headline property.

Readme

caution

This component is currently under development and may be subject to updates and changes in layout, APIs, and interfaces**

Properties

Property	Attribute	Description	Type	Default
`appName`	`app-name`	If present shows the application name next to the DHL logo.	`string`	`undefined`
`countryData`	--	This is an optional prop of the below shape if passed will display and manage the configuration of country data regarding the copy, title, redirection link, and if the link should open in the new window.	`ItemLink & { copy?: string; }`	`undefined`
`dataTestid`	`data-testid`	An optional prop. The test id attached to the component as a data-testid attribute.	`string`	`undefined`
`languageData`	--	This is an optional prop of the below shape if passed controls the configuration of the languages on the navbar. It accepts the array of languages object.	`(ItemLink & { copy?: string; } & { isSelected?: boolean; })[]`	`undefined`
`logo` (required)	--	This is REQUIRED 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`
`mobileNavigationItems`	--	This is an optional prop of the below shape if passed will display and manage the mobile navigation drawer. It accepts an object of menuItems, search redirect url and language redirec MenuItems is an object that constructs the mobile navigation items, each navigation item can either be of type `backbtn, headline, list and linkList` `type Definitions?:` `link` renders the item as basic anchor element `headline` renders an item as a headline `linkList` renders an item as a list of sublists `backBtn` renders the link as a backBtn	`{ items?: (ItemLink & { copy?: string; } & { id: string; type: string; linkList?: (ItemLink & { copy?: string; } & { id: string; type: string; })[]; } & { linkList?: MobileNavigationItem[]; })[]; searchUrl: string; languageUrl?: string; }`	`undefined`
`primaryMetaItems`	--	This is an optional prop of the below shape if passed will display and manage the configuration of each primary meta item regarding the copy, title, redirection link, and if it should open in a new window.	`ItemCopy[]`	`undefined`
`primaryNavigationItems`	--	This is an optional prop if passed will display and manage the configuration of each primary navigation item regarding the headline, title, redirection link, the popover component etc. It accepts an array of object of navigationItems as the below shape.	`ItemHeadline[]`	`undefined`
`searchData`	--	This is an optional prop of the below shape if passed will display and manage the configuration of a search link data including the copy, title, redirection link, and if the link should open in the new window.	`ItemLink & { copy?: string; }`	`undefined`
`secondaryHeadline`	--	This is an optional prop of the below shape if passed will display and manage the configuration of secondary navigation headline.	`ItemLink & { copy?: string; }`	`undefined`
`secondaryNavigationItems`	--	This is an optional prop of the below shape if passed will display and manage configuration of each secondary navigation item regarding the headline, title, redirection link, the popover component etc. It accepts an array object of navigationItems as the below shape.	`ItemHeadline[]`	`undefined`

Slots

Slot	Description
`"primary-action"`	used to position a right aligned element within the navbar. Applied if primaryMetaItems, countryData and languageData are undefined

Dependencies

Depends on

Graph

Built by DHL User Interface Library Team!

Navbar

Import

Code

Slots

Popover

Mobile Menu

Nested Mobile Navigation

Interactive Demo

Example

Example 2

Example 3

Example 4

Migrating from DUIL 1.0

Readme

Properties

Slots

Dependencies

Depends on

Graph

Import

Code​

Slots​

Popover​

Mobile Menu​

Nested Mobile Navigation​

Interactive Demo​

Example​

Example 2​

Example 3​

Example 4​

Migrating from DUIL 1.0​

Readme​

Properties​

Slots​

Dependencies​

Depends on​

Graph​

Code

Slots

Popover

Mobile Menu

Nested Mobile Navigation

Interactive Demo

Example

Example 2

Example 3

Example 4

Migrating from DUIL 1.0

Readme

Properties

Slots

Dependencies

Depends on

Graph