### Basic Navigation

Simple navigation link lists.

#### Horizontal Nav

HTML

    <nav class="nav" aria-label="Main navigation">
                <ul class="nav__list">
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link">Home</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">About</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Services</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Contact</a>
                    </li>
                </ul>
            </nav>

#### Vertical Nav

HTML

    <nav class="nav nav--vertical" aria-label="Sidebar navigation">
                <ul class="nav__list">
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link">Dashboard</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Analytics</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Reports</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Settings</a>
                    </li>
                </ul>
            </nav>

### Nav Pills

Pill-shaped navigation links.

#### Horizontal Pills

HTML

    <nav class="nav nav--pills" aria-label="Pill navigation">
                <ul class="nav__list">
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link">Active</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Link</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Link</a>
                    </li>
                    <li class="nav__item nav__item--disabled">
                        <a
                            href="#"
                            class="nav__link"
                            tabindex="-1"
                            aria-disabled="true"
                        >
                            Disabled
                        </a>
                    </li>
                </ul>
            </nav>

#### Fill Pills

HTML

    <nav class="nav nav--pills nav--fill" aria-label="Full width pills">
                <ul class="nav__list">
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link">Active</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Much Longer Link</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Link</a>
                    </li>
                </ul>
            </nav>

### Nav Tabs

Tabbed navigation interface.

#### Basic Tabs

HTML

    <nav class="nav nav--tabs" aria-label="Tab navigation">
                <ul class="nav__list" role="tablist">
                    <li class="nav__item" role="presentation">
                        <a
                            href="#"
                            class="nav__link nav__link--active"
                            role="tab"
                            aria-selected="true"
                        >
                            Active
                        </a>
                    </li>
                    <li class="nav__item" role="presentation">
                        <a
                            href="#"
                            class="nav__link"
                            role="tab"
                            aria-selected="false"
                        >
                            Tab 2
                        </a>
                    </li>
                    <li class="nav__item" role="presentation">
                        <a
                            href="#"
                            class="nav__link"
                            role="tab"
                            aria-selected="false"
                        >
                            Tab 3
                        </a>
                    </li>
                </ul>
            </nav>

#### Underline Tabs

HTML

    <nav class="nav nav--tabs nav--underline" aria-label="Underline tabs">
                <ul class="nav__list" role="tablist">
                    <li class="nav__item" role="presentation">
                        <a href="#" class="nav__link nav__link--active" role="tab">
                            Active
                        </a>
                    </li>
                    <li class="nav__item" role="presentation">
                        <a href="#" class="nav__link" role="tab">Tab 2</a>
                    </li>
                    <li class="nav__item" role="presentation">
                        <a href="#" class="nav__link" role="tab">Tab 3</a>
                    </li>
                </ul>
            </nav>

### Navigation with Icons

Navigation items enhanced with icons.

#### Icon Navigation

HTML

    <nav class="nav nav--vertical" aria-label="Icon navigation">
                <ul class="nav__list">
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link">
                            <span class="nav__icon">🏠</span>
                            <span class="nav__text">Home</span>
                        </a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">
                            <span class="nav__icon">👤</span>
                            <span class="nav__text">Profile</span>
                        </a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">
                            <span class="nav__icon">⚙️</span>
                            <span class="nav__text">Settings</span>
                        </a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">
                            <span class="nav__icon">📧</span>
                            <span class="nav__text">Messages</span>
                            <span class="nav__badge">3</span>
                        </a>
                    </li>
                </ul>
            </nav>

#### Icon Only Navigation

HTML

    <nav class="nav nav--icons" aria-label="Icon-only navigation">
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="#" class="nav__link" aria-label="Home">🏠</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link" aria-label="Search">🔍</a>
                    </li>
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link" aria-label="Notifications">
                            🔔
                        </a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link" aria-label="Profile">👤</a>
                    </li>
                </ul>
            </nav>

### Nested Navigation

Multi-level navigation with submenus.

#### Collapsible Submenu

HTML

    <nav
                class="nav nav--vertical nav--nested"
                aria-label="Nested navigation"
            >
                <ul class="nav__list">
                    <li class="nav__item nav__item--active">
                        <a href="#" class="nav__link">Dashboard</a>
                    </li>
                    <li class="nav__item nav__item--expandable">
                        <a href="#" class="nav__link">
                            <span>Products</span>
                            <span class="nav__arrow">▼</span>
                        </a>
                        <ul class="nav__submenu">
                            <li class="nav__item">
                                <a href="#" class="nav__link">All Products</a>
                            </li>
                            <li class="nav__item">
                                <a href="#" class="nav__link">Categories</a>
                            </li>
                            <li class="nav__item">
                                <a href="#" class="nav__link">Inventory</a>
                            </li>
                        </ul>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Orders</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Customers</a>
                    </li>
                </ul>
            </nav>

### Dividers & Groups

Organize navigation with dividers and headings.

#### Grouped Navigation

HTML

    <nav class="nav nav--vertical" aria-label="Grouped navigation">
                <span class="nav__heading">Main</span>
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="#" class="nav__link">Dashboard</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Analytics</a>
                    </li>
                </ul>
                <hr class="nav__divider" />
                <span class="nav__heading">Account</span>
                <ul class="nav__list">
                    <li class="nav__item">
                        <a href="#" class="nav__link">Profile</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Settings</a>
                    </li>
                    <li class="nav__item">
                        <a href="#" class="nav__link">Logout</a>
                    </li>
                </ul>
            </nav>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!