Menus

We use menus to navigate websites.

Menu HTML

Use ul in a nav tag for menus.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

<nav>
  <ul>
  	<li><a href="/one">Menu link one</a></li>
  	<li><a href="/two">Menu link two</a></li>
  	<li><a href="/three">Menu link three</a></li>
  </ul>
</nav>

Menu toggle

It's common to hide the menu on mobile and provide a toggle button.

Basic example

<button onclick="this.nextSiblingElement.classList.toggle('hidden')">Menu</button>

https://codepen.io/mortona42/full/azZjoqe

This simply toggles the .hidden class on the menu.

This works ok for tab navigation. You can choose to activate the menu, then continue to tab through the links. However, there is no way to close the menu as you continue tabbing.

See notes on dropdown component in daisyui: https://daisyui.com/components/dropdown/.