# Navigation Components > Nav patterns: top bar, sidebar, mobile hamburger, breadcrumb, and tabbed navigation > 네비게이션 패턴: 상단바, 사이드바, 모바일 햄버거, 브레드크럼, 탭 네비게이션 **Category**: Components | **Tags**: navigation, navbar, sidebar, tabs, breadcrumb, tailwind | **Difficulty**: Beginner ## Preview ``` +-- Top Bar ----------------------------------+ | Logo Home Products Pricing [Sign Up] | +---------------------------------------------+ +-- Sidebar ---------+ +-- Tabs ----------+ | Logo | | Tab1 | Tab2 | Tab3| | > Dashboard | | [ content ] | | Analytics | +------------------+ | Settings | +-- Breadcrumb -----+ +--------------------+ | Home > Docs > API | ``` ## Quick Start ```bash # 1. Pick the nav pattern you need # 2. Copy the HTML block into your layout # 3. Mobile hamburger uses pure JS toggle (no framework needed) ``` ## Full Code ```html Navigation Components

Navigation Components

Top Navbar

Sidebar Navigation

AppName

Breadcrumb

Tabs

Tab content goes here. Each tab shows different content by toggling visibility.

``` ## Customization Guide - **Active state**: Change the active nav link background to match your brand (`bg-indigo-50` to `bg-blue-50`, etc.) - **Icons**: Replace inline SVGs with your icon library (Heroicons, Lucide, Phosphor) - **Mobile menu**: The hamburger toggles a hidden div; wire up click-outside to close - **Tabs**: Add JS to toggle `hidden` class on tab panels and update active tab styling - **Breadcrumb separator**: Change `/` to `>` or an SVG chevron icon - **Sidebar width**: Adjust `w-64` for wider/narrower sidebar ## 2026 Trend Notes - Backdrop blur navbar (`backdrop-blur bg-white/80`) for modern transparency effect - Pill tabs with segmented control look (background container + active pill) is the dominant pattern - Sidebar active state uses soft background color + border accent - Mobile menu slides in below nav (not overlay) for simpler implementation - Breadcrumbs with semantic `
    ` element for accessibility