Nav

The nav is a responsive friendly dispaly of a list of links inside a <nav> element.

Create a NAV element with the class of dk-nav and the attribute aria-labelledby='menu-label' with a menu label.
The tabs will automatically overflow to a dropdown if they don't all fit. By default this overflow panel will use the label "More" but can be overriden with a data-overflow-text attribute on the NAV element.
Inside of the NAV element add HREF elements with the class of dk-nav__link
To mark a link as the page you are currently on, add aria-current="page" to the HREF.
To get the overflow dropdown menu to work you have call the dk.nav() function from the global JS file. The overflow is based on the width of the NAV element. Style this element to the width that you want it to be and the script will move links that don't fit into the overflow dropdown.
You can pass the following settings as an object to dk.nav()
- more :{verticalAlign: "top|center"}

<nav
        class="dk-nav nav-example"
        aria-labelledby="mydkmenu"
        data-overflow-text="More"
        style="max-width:800px">
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Dashboard
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Orders
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Payments
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)"
            aria-current="page">
            Favorites
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Preferences
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Profile
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Returns
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Status History
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Product Notifications
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Document Request Center
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            Attach Existing Open Account
        </a>
        <a
            class="dk-nav__link"
            href="javascript:void(0)">
            My Tools
        </a>
    </nav>

Javascript

dk => {
    dk.nav();
  }