Skip to content

Navigation

Comprehensive navigation components for web applications. Includes headers, breadcrumbs, pagination, tabs, and sidebar navigation patterns.

Living Demo: All examples on this page are interactive. Try clicking tabs, hovering over navigation links, and toggling states.

The sticky header component provides brand identity, navigation links, and action buttons. Use hu-header for the wrapper, hu-header-inner for the flex container, and hu-header-brand for the logo area.

Basic Header

Nimbus
Sign In Get Started 
<header class="hu-header">
    <div class="hu-header-inner">
        <a href="#" class="hu-header-brand">Nimbus</a>
        <nav class="hu-header-nav">
            <a href="#" class="hu-header-nav-link hu-active">Home</a>
            <a href="#" class="hu-header-nav-link">Features</a>
            <a href="#" class="hu-header-nav-link">Pricing</a>
            <a href="#" class="hu-header-nav-link">Docs</a>
        </nav>
        <div class="hu-header-actions">
            <a href="#" class="hu-btn hu-btn-ghost">Sign In</a>
            <a href="#" class="hu-btn hu-btn-primary">Get Started</a>
        </div>
    </div>
</header>

Header with Theme Toggle

Nimbus
Support Upgrade 
<header class="hu-header">
    <div class="hu-header-inner">
        <a href="#" class="hu-header-brand">Nimbus</a>
        <nav class="hu-header-nav">
            <a href="#" class="hu-header-nav-link">Dashboard</a>
            <a href="#" class="hu-header-nav-link hu-active">Services</a>
            <a href="#" class="hu-header-nav-link">Domains</a>
        </nav>
        <div class="hu-header-actions">
            <button class="hu-theme-toggle" aria-label="Toggle theme">
                <span>☀</span>
            </button>
            <a href="#" class="hu-btn hu-btn-ghost">Support</a>
            <a href="#" class="hu-btn hu-btn-primary">Upgrade</a>
        </div>
    </div>
</header>

Breadcrumbs show the current page location within a navigational hierarchy. Use hu-breadcrumb for the container and hu-breadcrumb-item for each level.

Basic Breadcrumb

Deep Breadcrumb

Pagination

Pagination allows users to navigate through pages of content. Use hu-pagination for the container, hu-pagination-item for each page link, and hu-active / hu-disabled modifiers.

Basic Pagination

<nav class="hu-pagination">
    <a href="#" class="hu-pagination-item hu-disabled">← Prev</a>
    <a href="#" class="hu-pagination-item hu-active">1</a>
    <a href="#" class="hu-pagination-item">2</a>
    <a href="#" class="hu-pagination-item">3</a>
    <a href="#" class="hu-pagination-item">4</a>
    <a href="#" class="hu-pagination-item">5</a>
    <a href="#" class="hu-pagination-item">Next →</a>
</nav>

End of Pages

<nav class="hu-pagination">
    <a href="#" class="hu-pagination-item">← Prev</a>
    <a href="#" class="hu-pagination-item">1</a>
    <a href="#" class="hu-pagination-item">2</a>
    <a href="#" class="hu-pagination-item">3</a>
    <a href="#" class="hu-pagination-item hu-active">4</a>
    <a href="#" class="hu-pagination-item hu-disabled">Next →</a>
</nav>

Tabs

Tabs organize content into multiple panels. Use hu-tabs for the container, hu-tab for each tab trigger, and hu-tab-content with hu-tab-pane for the panels. Link tabs to panes using data-tab attributes.

Basic Tabs

This is the overview content. Our VPS hosting plans come with guaranteed resources, full root access, and 24/7 support.

Technical specifications: 2 vCPU, 4GB RAM, 80GB SSD, 4TB Bandwidth, 1Gbps Port.

Customer reviews: "Excellent performance and uptime!" - 4.8/5 average rating.

<div class="hu-tabs">
    <button class="hu-tab hu-active" data-tab="overview">Overview</button>
    <button class="hu-tab" data-tab="specs">Specifications</button>
    <button class="hu-tab" data-tab="reviews">Reviews</button>
</div>
<div class="hu-tab-content">
    <div class="hu-tab-pane hu-active" id="overview">
        <p>Overview content here...</p>
    </div>
    <div class="hu-tab-pane" id="specs">
        <p>Specifications content here...</p>
    </div>
    <div class="hu-tab-pane" id="reviews">
        <p>Reviews content here...</p>
    </div>
</div>

Sidebar navigation provides a persistent navigation structure for documentation and admin panels. Use hu-sidebar with nested hu-sidebar-section and hu-sidebar-nav elements.

Basic Sidebar

Sidebar with Nested Links

Real-World Examples

Real-world navigation patterns used in web applications. These examples show how to combine multiple navigation components for common application UIs.

Main Site Navbar

CloudHost
Client Login Order Now 
<header class="hu-header">
    <div class="hu-header-inner">
        <a href="#" class="hu-header-brand">CloudHost</a>
        <nav class="hu-header-nav">
            <a href="#" class="hu-header-nav-link">Hosting</a>
            <a href="#" class="hu-header-nav-link">Domains</a>
            <a href="#" class="hu-header-nav-link">Email</a>
            <a href="#" class="hu-header-nav-link">SSL Certificates</a>
            <a href="#" class="hu-header-nav-link">Pricing</a>
        </nav>
        <div class="hu-header-actions">
            <a href="#" class="hu-btn hu-btn-ghost">Client Login</a>
            <a href="#" class="hu-btn hu-btn-primary">Order Now</a>
        </div>
    </div>
</header>

Client Area Navigation

My Services

Manage your active hosting services, domains, and subscriptions.

<div class="hu-layout">
    <aside class="hu-sidebar">
        <nav class="hu-sidebar-nav">
            <div class="hu-sidebar-section">
                <div class="hu-sidebar-title">Client Area</div>
                <a href="#" class="hu-sidebar-nav-link">Dashboard</a>
                <a href="#" class="hu-sidebar-nav-link hu-active">Services</a>
                <a href="#" class="hu-sidebar-nav-link">Domains</a>
                <a href="#" class="hu-sidebar-nav-link">Billing</a>
                <a href="#" class="hu-sidebar-nav-link">Support</a>
                <a href="#" class="hu-sidebar-nav-link">Affiliates</a>
            </div>
            <div class="hu-sidebar-section">
                <div class="hu-sidebar-title">Account</div>
                <a href="#" class="hu-sidebar-nav-link">My Profile</a>
                <a href="#" class="hu-sidebar-nav-link">Notifications</a>
                <a href="#" class="hu-sidebar-nav-link">Security</a>
            </div>
        </nav>
    </aside>
    <main class="hu-main">
        <nav class="hu-breadcrumb">
            <a href="#" class="hu-breadcrumb-item">Client Area</a>
            <span class="hu-breadcrumb-item hu-active">Services</span>
        </nav>
        <h3>My Services</h3>
        <p>Manage your active hosting services...</p>
    </main>
</div>

Documentation Sidebar

<div class="hu-sidebar">
    <nav class="hu-sidebar-nav">
        <div class="hu-sidebar-section">
            <div class="hu-sidebar-title">Getting Started</div>
            <a href="#" class="hu-sidebar-nav-link">Introduction</a>
            <a href="#" class="hu-sidebar-nav-link">Installation</a>
            <a href="#" class="hu-sidebar-nav-link">Quick Start</a>
        </div>
        <div class="hu-sidebar-section">
            <div class="hu-sidebar-title">Core Concepts</div>
            <a href="#" class="hu-sidebar-nav-link">Theming</a>
            <a href="#" class="hu-sidebar-nav-link hu-active">Components</a>
            <div class="hu-sidebar-subnav">
                <a href="#" class="hu-sidebar-nav-link">Buttons</a>
                <a href="#" class="hu-sidebar-nav-link">Cards</a>
                <a href="#" class="hu-sidebar-nav-link">Forms</a>
                <a href="#" class="hu-sidebar-nav-link hu-active">Navigation</a>
                <a href="#" class="hu-sidebar-nav-link">Tables</a>
            </div>
            <a href="#" class="hu-sidebar-nav-link">Layout</a>
            <a href="#" class="hu-sidebar-nav-link">Utilities</a>
        </div>
        <div class="hu-sidebar-section">
            <div class="hu-sidebar-title">Advanced</div>
            <a href="#" class="hu-sidebar-nav-link">Customization</a>
            <a href="#" class="hu-sidebar-nav-link">JavaScript</a>
            <a href="#" class="hu-sidebar-nav-link">Plugins</a>
        </div>
    </nav>
</div>

API Reference

Complete reference for all navigation component classes and their modifiers.

Header

Class Description
hu-header Sticky header container
hu-header-inner Flex container for header content
hu-header-brand Brand logo and name
hu-header-nav Navigation links container
hu-header-nav-link Individual navigation link
hu-header-actions Action buttons container

Breadcrumb

Class Description
hu-breadcrumb Breadcrumb container
hu-breadcrumb-item Individual breadcrumb level
hu-active Current page indicator

Pagination

Class Description
hu-pagination Pagination container
hu-pagination-item Individual page link
hu-active Current page state
hu-disabled Disabled page state

Tabs

Class Description
hu-tabs Tab triggers container
hu-tab Individual tab trigger button
hu-tab-content Tab panels container
hu-tab-pane Individual tab panel
data-tab Links tab trigger to panel ID

Sidebar

Class Description
hu-sidebar Sidebar container
hu-sidebar-section Navigation section group
hu-sidebar-title Section heading
hu-sidebar-nav Navigation links container
hu-sidebar-nav-link Individual navigation link
hu-sidebar-subnav Nested navigation group

JavaScript Data Attributes

Attribute Component Description
data-tab Tabs Links tab trigger to content pane by ID
data-theme-toggle Header Enables theme switching on button click
data-sidebar Body Enables sidebar layout mode
data-sidebar-overlay Sidebar Enables mobile overlay for sidebar
data-copy Code blocks Enables copy-to-clipboard functionality