<nav class="c-nav c-nav--vertical js-nav" role="navigation" aria-label="Main Navigation">
    <ul class="c-nav__list" role="menubar">
        <li class="c-nav__list-element">
            <a role="menuitem" class="c-nav__link" href="#overview" title="Overview">Overview</a>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" role="menuitem" href="#layout" title="Layout">Layout</a>

            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child">
                    <a role="menuitem" class="c-nav__link c-nav__link--child" href="#grid" title="Grid">Grid</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child">
                    <a role="menuitem" class="c-nav__link c-nav__link--child" href="#media-queries" title="Media Querie">Media Queries</a>
                </li>
            </ul>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" role="menuitem" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" href="#content" title="Content">Content</a>
            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#reboot" title="Reboot">Reboot</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#typography" title="Typography">Typography</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#images" title="Images">Images</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#tables" title="Tables">Tables</a>
                </li>
            </ul>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" role="menuitem" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" href="#components" title="Components">Components</a>

            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#accordions" title="Accordions">Accordions</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#alerts" title="Alerts">Alerts</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#buttons" title="Buttons">Buttons</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#cards" title="Cards">Cards</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#embed" title="Embeds">Embeds</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#forms" title="Forms">Forms</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#modal" title="Modals">Modals</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#navs" title="Nav menus">Nav menus</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#pagination" title="Pagination">Pagination</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#breadcrumb" title="Breadcrumb">Breadcrumb</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#progress" title="Progress">Progress</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#sliders" title="Sliders">Sliders</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#tabs" title="Tabs">Tabs</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#tooltip" title="Tooltips and Popovers">Tooltips and Popovers</a>
                </li>
            </ul>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" role="menuitem" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" href="#utilities" title="Utilities">Utilities</a>

            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#border" title="Border">Border</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#display" title="Display">Display</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#margin" title="Margin">Margin</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#padding" title="Padding">Padding</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#typography" title="Typography">Typography</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#visibility" title="Visibility">Visibility</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
<nav class="c-nav c-nav--vertical js-nav" role="navigation" aria-label="Main Navigation">
    <ul class="c-nav__list" role="menubar">
        <li class="c-nav__list-element">
            <a role="menuitem" class="c-nav__link" href="#overview" title="Overview">Overview</a>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" role="menuitem" href="#layout" title="Layout">Layout</a>

            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child">
                    <a role="menuitem" class="c-nav__link c-nav__link--child" href="#grid" title="Grid">Grid</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child">
                    <a role="menuitem" class="c-nav__link c-nav__link--child" href="#media-queries" title="Media Querie">Media Queries</a>
                </li>
            </ul>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" role="menuitem" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" href="#content" title="Content">Content</a>
            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#reboot" title="Reboot">Reboot</a>
                </li>
                
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#typography" title="Typography">Typography</a>
                </li>
                
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#images" title="Images">Images</a>
                </li>
                
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#tables" title="Tables">Tables</a>
                </li>
            </ul>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" role="menuitem" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" href="#components" title="Components">Components</a>

            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#accordions" title="Accordions">Accordions</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#alerts" title="Alerts">Alerts</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#buttons" title="Buttons">Buttons</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#cards" title="Cards">Cards</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#embed" title="Embeds">Embeds</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#forms" title="Forms">Forms</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#modal" title="Modals">Modals</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#navs" title="Nav menus">Nav menus</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#pagination" title="Pagination">Pagination</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#breadcrumb" title="Breadcrumb">Breadcrumb</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#progress" title="Progress">Progress</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#sliders" title="Sliders">Sliders</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#tabs" title="Tabs">Tabs</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#tooltip" title="Tooltips and Popovers">Tooltips and Popovers</a>
                </li>
            </ul>
        </li>

        <li class="c-nav__list-element c-nav__list-element--has-children" role="menuitem" aria-haspopup="true" aria-expanded="false">
            <a class="c-nav__link" href="#utilities" title="Utilities">Utilities</a>

            <ul class="c-nav__list c-nav__list--child" role="menu">
                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#border" title="Border">Border</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#display" title="Display">Display</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#margin" title="Margin">Margin</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#padding" title="Padding">Padding</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#typography" title="Typography">Typography</a>
                </li>

                <li class="c-nav__list-element c-nav__list-element--child" role="menuitem">
                    <a class="c-nav__link c-nav__link--child" href="#visibility" title="Visibility">Visibility</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
{
  "name": "Child Menus"
}

This is created using best practices with accessibility in mind (https://www.w3.org/WAI/tutorials/menus/), using aria states, roles, keyboard support and delays for hovering on mobile.

To get this to work, you will need to use the class .js-nav on the main .c-nav nav element.