Navicon

A navicon, or "hamburger button", is a special button used to control mobile navigation menus.

<quiet-navicon label="Toggle menu" style="font-size: 1.75rem;"></quiet-navicon>

Examples Jump to heading #

Associating a menu Jump to heading #

To associate the navicon with a navigation menu, add for="id", where id is the ID of the nav menu that will show/hide when toggled. This tells assistive devices which element the navicon controls. The nav menu must exist in the same document as the navicon to work correctly.

<quiet-navicon for="nav-menu"></quiet-navicon>

<!-- The navicon will toggle this element -->
<nav id="nav-menu">
  ...
</nav>

The navicon does not show or hide the menu for you. You must add your own JavaScript and/or CSS to toggle it. You can listen for the click event and manage things with JavaScript.

const navicon = document.querySelector('quiet-navicon');

navicon.addEventListener('click', () => {
  if (navicon.expanded) {
    // Show the menu
  } else {
    // Hide the menu
  }
});

For a CSS-only solution, try using the :has() selector combined with :state(expanded) to target the nav menu when the navicon is expanded.

#nav-menu {
  /* Hidden menu styles */
}

body:has(quiet-navicon:state(expanded)) #nav-menu {
  /* Visible menu styles */
}

Customizing the label Jump to heading #

By default, the navicon's accessible label is a localized version of the phrase "toggle navigation." Use the label attribute to provide your own label. Labels aren't displayed on the screen, but they're announced by assistive devices.

<quiet-navicon label="View mobile menu" style="font-size: 1.75rem;"></quiet-navicon>

Changing the symbol Jump to heading #

Use the symbol attribute to choose between the hamburger, equals, horizontal-dots, and vertical-dots symbols.

<div style="font-size: 1.75rem;">
  <quiet-navicon symbol="hamburger"></quiet-navicon>
  <quiet-navicon symbol="equals"></quiet-navicon>
  <quiet-navicon symbol="horizontal-dots"></quiet-navicon>
  <quiet-navicon symbol="vertical-dots"></quiet-navicon>
</div>

Changing the size Jump to heading #

Navicons are sized based on the current font size. You can make them bigger or smaller by changing the font-size property on the component or an ancestor. A good default size is 1.75rem, which equals 28×28px with a 16px root size.

<quiet-navicon style="font-size: 1rem;"></quiet-navicon>
<quiet-navicon style="font-size: 1rem;" symbol="equals"></quiet-navicon>
<quiet-navicon style="font-size: 1rem;" symbol="horizontal-dots"></quiet-navicon>
<quiet-navicon style="font-size: 1rem;" symbol="vertical-dots"></quiet-navicon>
<br><br>
<quiet-navicon style="font-size: 3rem;"></quiet-navicon>
<quiet-navicon style="font-size: 3rem;" symbol="equals" ></quiet-navicon>
<quiet-navicon style="font-size: 3rem;" symbol="horizontal-dots" ></quiet-navicon>
<quiet-navicon style="font-size: 3rem;" symbol="vertical-dots" ></quiet-navicon>

Changing the color Jump to heading #

Set the color CSS property to control the color of the navicon.

<div style="font-size: 1.75rem;">
  <quiet-navicon style="color: deeppink;"></quiet-navicon>
  <quiet-navicon symbol="equals" style="color: dodgerblue;"></quiet-navicon>
  <quiet-navicon symbol="horizontal-dots" style="color: seagreen;"></quiet-navicon>
  <quiet-navicon symbol="vertical-dots" style="color: tomato;"></quiet-navicon>
</div>

Disabling Jump to heading #

Use the disabled attribute to disable the navicon.

<quiet-navicon disabled style="font-size: 1.75rem;"></quiet-navicon>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/navicon/navicon.js';

import '@quietui/quiet/dist/components/navicon/navicon.js';

Properties Jump to heading #

Navicon has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Events Jump to heading #

Navicon dispatches the following custom events. You can listen to them the same way was native events. Learn more about custom events

CSS custom properties Jump to heading #

Navicon supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

CSS parts Jump to heading #

Navicon exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts

Custom States Jump to heading #

Navicon has the following custom states. You can target them with CSS using the selectors shown below. Learn more about custom states