# 🧭 導航元件

導航欄、側邊欄、分頁標籤、麵包屑等導航元件

← 返回主頁

## 導航欄 (Navbar)

    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="navbar-brand">
                <div class="navbar-logo">🎭</div>
                <span>Drama Ling</span>
            </a>

            <ul class="navbar-nav">
                <li><a href="#" class="navbar-link active">首頁</a></li>
                <li><a href="#" class="navbar-link">學習</a></li>
                <li><a href="#" class="navbar-link">練習</a></li>
            </ul>

            <div class="navbar-actions">
                <button class="btn btn-secondary">登入</button>
                <button class="btn btn-primary">註冊</button>
            </div>
        </div>
    </nav>

## 側邊欄 (Sidebar)

    <aside class="sidebar">
        <div class="sidebar-header">
            <div class="navbar-brand">
                <div class="navbar-logo">🎭</div>
                <span>Drama Ling</span>
            </div>
        </div>

        <nav class="sidebar-menu">
            <div class="sidebar-section">
                <div class="sidebar-section-title">主要功能</div>
                <a href="#" class="sidebar-item active">
                    <span class="sidebar-icon">🏠</span>
                    儀表板
                </a>
                <a href="#" class="sidebar-item">
                    <span class="sidebar-icon">📚</span>
                    詞彙學習
                </a>
            </div>
        </nav>
    </aside>

## 麵包屑 (Breadcrumb)

    <nav class="breadcrumb">
        <a href="#" class="breadcrumb-item">首頁</a>
        <span class="breadcrumb-separator">›</span>
        <a href="#" class="breadcrumb-item">學習中心</a>
        <span class="breadcrumb-separator">›</span>
        <span class="breadcrumb-current">第一課</span>
    </nav>

## 分頁標籤 (Tabs)

- 總覽 12
- 詞彙 48
- 口說 5
- 對話 8
- 設定

    <div class="tabs">
        <ul class="tabs-list">
            <li>
                <a href="#" class="tab-item active">
                    總覽
                    <span class="tab-badge">12</span>
                </a>
            </li>
            <li>
                <a href="#" class="tab-item">
                    詞彙
                    <span class="tab-badge">48</span>
                </a>
            </li>
        </ul>
    </div>

## 分頁 (Pagination)

    <nav class="pagination">
        <a href="#" class="pagination-item disabled">‹</a>
        <a href="#" class="pagination-item">1</a>
        <a href="#" class="pagination-item active">2</a>
        <a href="#" class="pagination-item">3</a>
        <span class="pagination-ellipsis">...</span>
        <a href="#" class="pagination-item">12</a>
        <a href="#" class="pagination-item">›</a>
    </nav>

## 步驟指示器 (Stepper)

✓
基本資料
填寫個人資訊
2
學習目標
選擇學習方向
3
程度評估
測試您的程度
4
完成
開始學習

    <div class="stepper">
        <div class="stepper-item completed">
            <div class="stepper-circle">✓</div>
            <div class="stepper-content">
                <div class="stepper-title">基本資料</div>
                <div class="stepper-description">填寫個人資訊</div>
            </div>
        </div>

        <div class="stepper-item active">
            <div class="stepper-circle">2</div>
            <div class="stepper-content">
                <div class="stepper-title">學習目標</div>
                <div class="stepper-description">選擇學習方向</div>
            </div>
        </div>
    </div>