🧭 導航元件

<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>

<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>

<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>

<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>

<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>

<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>