DUNavbar
NavigationSticky top navigation with brand, links, and actions.
import { DUNavbar } from 'deri-ui';Live preview
See live shell
Use the SaaS kit demo for a full navbar + sidebar composition.
typescript
<DUNavbar brand="Deri" links={[{label:'Home',active:true}]} actions={<DUButton size="sm">Go</DUButton>} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | ReactNode | — | Logo/title |
| links | array | — | Nav links |
| actions | ReactNode | — | Right slot |
| onMenuClick | () => void | — | Mobile menu |
Usage
import { DUNavbar } from 'deri-ui';
<DUNavbar brand="Deri" links={[{label:'Home',active:true}]} actions={<DUButton size="sm">Go</DUButton>} />Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.