Side Navbar

Overview

Side Navbar opens a full-height navigation panel from a compact hamburger trigger.

It is built for websites where the navigation should feel deliberate without occupying the header all the time. The menu opens as a side panel, reveals primary links, keeps supporting information close, and gives the visitor a clear route back through a visible close control.

Use Side Navbar for portfolios, agency websites, campaign pages, product microsites, and editorial experiences where the navigation can behave like a designed moment. The page job is orientation: visitors should know what opened, where the important routes are, and how to close it without guessing.

The production risk is treating the menu like decoration. A side navbar is still navigation. Links need to be real links, the close control needs to be obvious, focus must move into the panel, Escape should close it, and focus should return to the hamburger trigger after closing.

Install Command

Usage Code

Component Code

Example Production Use Case

An agency portfolio can use Side Navbar to keep the hero visually clean while still giving visitors direct access to Work, Services, Pricing, Docs, and Contact. The hamburger opens a full-height panel with primary routes, contact details, and social links. The outcome is clarity: navigation feels designed without hiding where the visitor can go next.

Best Used For

• Portfolio, agency, and campaign sites where the header should stay minimal.
• Compact navigation systems that need primary links, contact details, and social links in one panel.
• Brand-led sites where opening navigation can be a polished interaction without slowing route access.

Not For

Not for complex apps, dashboards, dense product navigation, large documentation sites, or menus with many nested levels.

Not for sites where all primary actions need to remain visible at all times.

Performance Budget

Animate transform and opacity rather than layout, avoid re-rendering the whole page when the menu opens, lock background scroll cleanly, and remove listeners after close or route change.

Accessibility and Mobile

Use a real button for the hamburger trigger with an accessible label. Move focus into the menu when it opens, trap focus while open if the panel behaves modally, support Escape close, and restore focus to the trigger when it closes. On mobile, keep tap targets large and make the close control easy to reach.

Common Mistakes

• Building the hamburger trigger with a generic div instead of a real button.
• Opening a menu without moving keyboard focus into it.
• Forgetting Escape close and focus restoration.
• Letting the side panel cover content while background scroll remains active.
• Hiding important navigation links behind hover-only states.