Skip to content

Latest commit

 

History

History
43 lines (34 loc) · 1.03 KB

menu.md

File metadata and controls

43 lines (34 loc) · 1.03 KB
Raw

Menu

Simple visible menu

The link to #main is the current page, so it works as a skip link.

<nav aria-label="Main menu">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="#main" aria-current="page">About us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

Menu with button to show/hide

Note: this approach requires javascript to show/hide the list on click the button

<nav aria-label="Main menu">
    <button aria-expanded="false">
        <svg>...</svg>
        Menu
    </button>

    <ul id="menu-list" hidden>
        <li><a href="/">Home</a></li>
        <li><a href="#main" aria-current="page">About us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>