Navbar
Responsive navigation bar with search, user profile, mobile menu, and theme toggle.
Modular Build
Interactive Preview
Initialising Operative...
Architecture
Component Architecture
Navbar/
Prop Usage
| Prop | Type | Default | Description |
|---|---|---|---|
links | NavLink[] | [] | Array of { label, href } objects rendered as nav links. |
user | NavbarUser | null | null | Logged-in user data. When provided, shows the UserProfile dropdown. |
onSearch | (query: string) => void | — | Enables and handles the command-palette search. |
onLogout | () => void | — | Callback for the logout action in the user dropdown. |
onSwitchAccount | () => void | — | Callback for the switch-account action. |
actions | React.ReactNode | — | Slot for custom right-side actions (e.g. a Login button) when no user is logged in. |
showThemeToggle | boolean | true | Whether to render the ThemeToggler. |
logoHref | string | "/" | Destination of the logo link. |
layoutId | string | — | Framer Motion layoutId for the active-link pill animation. |
className | string | — | Additional classes on the <nav> element. |
Usage
import Navbar from '@/components/layouts/Navbar/Navbar';
<Navbar
links={[
{ label: 'Home', href: '/' },
{ label: 'Docs', href: '/docs' },
]}
user={{ name: 'Jane', email: 'jane@example.com' }}
onLogout={() => supabase.auth.signOut()}
onSearch={(q) => console.log('search:', q)}
showThemeToggle
/>