Navigation Back to home

SiteNavigation

An adaptive navigation component that supports hover and click interactions for submenus.

Import
the javascript logo
import { SiteNavigation } from "@schukai/monster/source/components/navigation/site-navigation.mjs";
Source
the git logo
Package
the npm logo
Since
1.0.0

Introduction

The <monster-site-navigation> component provides a responsive, accessible, and extensible navigation control designed for complex websites and applications. It automatically adjusts visible navigation items based on available space and moves overflow items into a dynamic hamburger menu. Submenus are fully supported and styled for both desktop and mobile interaction.

Designed with responsiveness, accessibility, and usability in mind, this component adapts seamlessly across devices while remaining fully customizable via slots, attributes, and CSS part styling.

Key Features

  • Responsive tab management: Automatically calculates which items fit in the visible navigation and moves the rest to a hidden menu.
  • Hamburger menu support: Overflow items appear inside a dropdown triggered by a toggle button.
  • Submenu handling: Supports hover-based submenus in visible navigation and click-based submenus in the hamburger menu.
  • Shadow DOM encapsulation: Internal structure is isolated, with exposed part attributes for styling.
  • Auto-positioning with Floating UI: Menus are dynamically positioned using floating logic to avoid clipping or overlap.
  • Resize-aware layout: Uses ResizeObserver and debounced updates to react to layout changes.

Improving the user experience

The <monster-site-navigation> component ensures that navigation remains accessible and easy to use even when space is limited. It avoids wrapping or breaking layout flows by intelligently shifting excess items into a dedicated menu. Users always see the most important links first, while secondary options remain accessible.

This contributes to faster navigation, fewer visual distractions, and a more professional overall impression, especially on smaller screens.

Efficiency in the development process

The component integrates easily into any Monster.js-powered web application and supports declarative configuration via HTML and slotting. Because of its adaptive design and customizable slots, it reduces the need for manual layout tuning and simplifies responsive design implementations.

Navigation items are provided via a slotted <ul> list, allowing seamless integration with CMSs, routing systems, or template engines. Developers can also override visual behavior using the exported parts and the provided CSS variables.

Simple Navigation

Javascript

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

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Navigation With Submenus

Javascript

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

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

Navigation With Mega Menu

Javascript

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

HTML

/** this example does not use an extra html file **/

Stylesheet

/** no additional stylesheet is defined **/

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.