Laioutr UI

Navigation & Headers

The Navigation package provides header, menu, search, breadcrumb, and locale/theme switcher components for building storefront navigation across devices.

Overview

The Navigation package bundles the components you need to build storefront navigation that works across breakpoints: headers, menus, search entry points, breadcrumbs, and common utility controls like locale and theme switching.

Use these components to keep navigation consistent across pages while still allowing different header variants for different contexts (home, category, shop, checkout, etc.).

Included components

Header Basic

Compact, slot-based header for landing pages and simpler sites.

Header Shop

E-commerce header with mega menu, side-by-side, or dropdown navigation modes.

Mobile Menu (Basic)

Mobile off-canvas drawer for HeaderBasic.

Mobile Menu (Shop)

Catalog-aware off-canvas drawer for HeaderShop.

Mega Menu

Desktop mega-menu compound: root, trigger, and content with auto-picked promo layouts.

Menu Side by Side

Desktop side-by-side off-canvas category menu with slide-in transitions.

Breadcrumbs

Breadcrumb navigation for hierarchical page structures.

Search Auto-Suggest

Header search with real-time autocomplete suggestions.

Top Bar

Optional top bar above the main header for locale, dark-mode, and info links.

Footer

Site footer with menu columns, contact rows, social, locale, and dark-mode controls.

Page Not Found

404 page composition with illustration, heading, subline, and a back-to-home CTA.

Language Switcher (UI Kit)

Locale switcher for the header utility row.

Dark Mode Switch (UI Kit)

Theme mode toggle for the header utility row.
Copyright © 2026 Laioutr GmbH