Component

Navbar

Top navigation bar with logo, links, and actions.

tsx
import { Navbar, BottomNav, TopBar } from 'wss3-forge'

Usage

•

Use for main site navigation

•

BottomNav for mobile tab bar

•

TopBar for simpler app headers

•

Sticky by default

Examples

Default Navbar

tsx
1<Navbar
2  items={[
3    { id: 'home', label: 'Home' },
4    { id: 'products', label: 'Products' },
5    { id: 'about', label: 'About' }
6  ]}
7  activeId="home"
8  onNavigate={(id) => console.log(id)}
9/>

Without Search

tsx
1<Navbar
2  items={[
3    { id: 'home', label: 'Home' },
4    { id: 'docs', label: 'Docs' },
5    { id: 'contact', label: 'Contact' }
6  ]}
7  activeId="docs"
8  showSearch={false}
9/>

Previous

Footer

Next

Pagination

Last updated: December 2025

Cookies

We use cookies to improve your experience and save your preferences.