SiteNavigation

A site navigation component for primary menus with adaptive submenu behavior.

Import

import { SiteNavigation } from "@schukai/monster/source/components/navigation/site-navigation.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Introduction

The Monster SiteNavigation component structures the primary navigation of a site or application. Use it when top level sections and nested submenus should remain accessible across the whole product.

When to use SiteNavigation

Use it for primary information architecture: Main sections, products and major feature areas belong here.
Use it when submenus need hover or click behavior: The component supports adaptive submenu handling.
Do not use it for step-based processes: Wizard flows need a more linear navigation model.

Simple Navigation

This basic example shows a responsive top navigation that can collapse items into a hamburger menu when available width becomes tight.

Javascript

/** this example does not use an extra script **/

HTML

<monster-site-navigation>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</monster-site-navigation>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Navigation With Submenus

This example adds nested lists so the navigation can render classic dropdown submenus for grouped links.

Javascript

/** this example does not use an extra script **/

HTML

<monster-site-navigation>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Products</a>
      <ul>
        <li><a href="#">Starter</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Enterprise</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Resources</a>
      <ul>
        <li><a href="#">Docs</a></li>
        <li><a href="#">Guides</a></li>
        <li><a href="#">Support</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</monster-site-navigation>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Navigation With Mega Menu

This example uses deeper nested lists to simulate a broader product navigation with grouped destinations.

Javascript

/** this example does not use an extra script **/

HTML

<monster-site-navigation>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Platform</a>
      <ul>
        <li>
          <a href="#">Commerce</a>
          <ul>
            <li><a href="#">Checkout</a></li>
            <li><a href="#">Payments</a></li>
            <li><a href="#">Subscriptions</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Operations</a>
          <ul>
            <li><a href="#">Orders</a></li>
            <li><a href="#">Inventory</a></li>
            <li><a href="#">Returns</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Insights</a>
          <ul>
            <li><a href="#">Dashboards</a></li>
            <li><a href="#">Exports</a></li>
            <li><a href="#">Alerts</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Pricing</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</monster-site-navigation>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The <monster-site-navigation> component uses the Shadow DOM to encapsulate its visual structure and styling, ensuring a predictable and consistent layout across browsers and contexts. Shadow DOM provides isolation from external styles and scripts, helping to avoid conflicts with application-wide CSS.

Shadow DOM and Accessibility

Internal elements such as the navigation container, hamburger button, and submenu overlays are all managed inside a shadow root. Despite the encapsulation, the component is fully accessible. All links remain reachable by keyboard and are labeled semantically. The hamburger button includes aria-label attributes and supports focus management and event delegation for correct interaction behavior on both desktop and mobile.

Customizing Through Exported Parts

The component exposes styling hooks using the part attribute. Developers can target these parts via the ::part() pseudo-selector to customize appearance without breaking encapsulation.

Available Part Attributes

control: Wraps the entire navigation component.
nav: The main navigation container that holds visible items.
visible-list: The <ul> list of navigation items that are visible.
nav-item: An individual navigation list item.
nav-link: A clickable link inside a nav item.
hamburger-container: Container for the hamburger toggle and its menu.
hamburger-button: The toggle button used to open the hidden menu.
hamburger-nav: The hidden dropdown navigation menu.
hidden-list: The <ul> that holds the hidden nav items inside the hamburger menu.
submenu: A submenu nested inside a nav item, either visible or hidden.

Example of customizing navigation link styling and hamburger appearance:

 monster-site-navigation::part(nav-link) { font-weight: 600; padding: 0.5em
    1em; color: var(--monster-color-primary-1); } monster-site-navigation::part(nav-item nav-item-active) {
    background-color: var(--monster-bg-color-secondary-1); } monster-site-navigation::part(hamburger-button) {
    background-color: transparent; border: none; color: var(--monster-color-primary-2); }

Explanation of the Example

nav-link: Increases text visibility and spacing for easier clicking.
nav-item-active: Highlights the currently active link.
hamburger-button: Styles the hamburger toggle with no background or border.

Accessibility

The <monster-site-navigation> component ensures strong keyboard and screen reader support. Focusable elements use semantic HTML tags such as <a>, and ARIA labels are applied where appropriate. Submenus use hover and focus behaviors for accessibility, and click handling for touch environments is correctly scoped to prevent accidental closure.

The hamburger toggle and submenu states are keyboard-accessible and include mouse fallback support, making the component usable across a wide range of devices and assistive technologies.

HTML Structure

<monster-site-navigation></monster-site-navigation>

JavaScript Initialization

const element = document.createElement('monster-site-navigation');
document.body.appendChild(element);

Exported

SiteNavigation

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions.

templates.main

string

undefined

The main HTML template for the component.

interactionModel

string

auto

n with submenus. Possible values: `auto`, `click`, `hover`. With `auto`, `hover` is used on desktop and `click` is used in the hamburger menu.

features

object

Container for additional feature flags.

features.resetOnClose

boolean

true

nus within the hamburger menu will be reset when it is closed.

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()

Events

monster-layout-change Fired when the layout of menu items changes. The event detail contains `{visibleItems, hiddenItems}`.
monster-hamburger-show Fired when the hamburger menu is shown. The event detail contains `{button, menu}`.
monster-hamburger-hide Fired when the hamburger menu is hidden. The event detail contains `{button, menu}`.
monster-submenu-show Fired when a submenu is shown. The event detail contains `{context, trigger, submenu, level}`.
monster-submenu-hide Fired when a submenu is hidden. The event detail contains `{context, trigger, submenu, level}`.

A responsive site navigation that automatically moves menu items into a hamburger menu when there isn't enough available space.

getCSSStyleSheet()

'auto', 'click', 'hover'

getTag()

'auto', 'click', 'hover'

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

'auto', 'click', 'hover'

connectedCallback()

'auto', 'click', 'hover'

disconnectedCallback()

'auto', 'click', 'hover'

Events

The component emits the following events:

monster-layout-change
Fired when the layout of menu items changes. The event detail contains `{visibleItems, hiddenItems}`.
monster-hamburger-show
Fired when the hamburger menu is shown. The event detail contains `{button, menu}`.
monster-hamburger-hide
Fired when the hamburger menu is hidden. The event detail contains `{button, menu}`.
monster-submenu-show
Fired when a submenu is shown. The event detail contains `{context, trigger, submenu, level}`.
monster-submenu-hide
Fired when a submenu is hidden. The event detail contains `{context, trigger, submenu, level}`.
monster-layout-change
Fired when the layout of menu items changes. The event detail contains `{visibleItems, hiddenItems}`.
monster-hamburger-show
Fired when the hamburger menu is shown. The event detail contains `{button, menu}`.
monster-hamburger-hide
Fired when the hamburger menu is hidden. The event detail contains `{button, menu}`.
monster-submenu-show
Fired when a submenu is shown. The event detail contains `{context, trigger, submenu, level}`.
monster-submenu-hide
Fired when a submenu is hidden. The event detail contains `{context, trigger, submenu, level}`.

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.