Navigation Snippets — Free HTML CSS JS Copy-Paste Nav Components

Navigation is the first UI element users interact with. It determines whether visitors can find what they need — and directly affects bounce rate, session depth, and task completion rate. Poorly built navigation (menu items that do not close, menus that cover clickable content, tabs that do not indicate the active state) creates frustration. Well-built navigation feels invisible. This collection covers every navigation pattern used in production web products.

Every snippet is plain HTML, CSS, and minimal vanilla JavaScript. No library dependencies — just copy and paste.

Hamburger Navigation animates three span elements into an × on open: the top span translates down and rotates 45°, the middle span fades out, the bottom span translates up and rotates -45°. The menu panel uses backdrop-filter: blur(12px) for a frosted glass effect. Click-outside and ESC key close the menu. The animation is pure CSS — the JavaScript only toggles the .open class.

Tab Bar uses the border-bottom: -2px margin overlap trick for the active indicator. The active tab button has border-bottom: 2px solid accent — identical to the container's border. A negative margin-bottom: -2px pulls it 2px down so it overlaps and hides the container's bottom border, creating a connected tab-to-panel appearance with no JavaScript positioning.

Dropdown Menu uses scale(0.97) + opacity: 0 as the hidden state and scale(1) + opacity: 1 as the open state. CSS transition handles the animation. Click-outside detection uses e.target.closest(".dropdown") — if the click was outside the dropdown container, the menu closes. ESC keydown also closes it. Both escape paths prevent the menu from being stuck open.

Animated Tabs renders a sliding pill indicator that moves to the selected tab. moveIndicator() reads btn.offsetLeft and btn.offsetWidth — the actual pixel position and width of the clicked tab — and sets CSS left and width on the indicator element. CSS transition: left 0.2s, width 0.2s animates the pill. This works for any tab label length without hardcoded positions.

Bottom Navigation implements iOS-style page switching with data-page attributes. Clicking a nav item deactivates all items, activates the clicked item, hides all pages, and shows the page matching the data-page value. A badge counter on one item increments independently.

Breadcrumb uses the CSS li+li::before combinator to insert a separator character (/) before every list item except the first — no JS, no extra HTML, no separator elements. aria-current="page" marks the current page for screen readers.

Stepper shows three states per step: done (filled circle with checkmark), active (accent ring with pulsing outer glow), and pending (grey circle). The connecting lines between steps fill in as each step completes. Navigation guards prevent advancing if the current step is incomplete.

Side Drawer slides in from the left via translateX(-100%) → translateX(0). An overlay backdrop appears simultaneously and clicking it closes the drawer. ESC also closes. A push effect option shifts the main content right instead of overlaying it.

Accordion FAQ, Scroll Progress Bar, Context Menu, and CSS Tooltip complete the collection with the remaining critical navigation patterns.