Navbar

A responsive navigation bar with slots for brand, center content, and end actions.

Import

import { Navbar } from "@gumtree/ui/layout/Navbar";

Props

PropTypeDefaultDescription
brandComponentChildren-Brand/logo element. Defaults to a "Gumtree" link.
centerComponentChildren-Center slot content
endComponentChildren-End slot content (e.g. theme switcher, user menu)

Examples

Default

Navbar with default brand and an action button.

<Navbar end={<Button variant="ghost" size="sm">Sign In</Button>} />

Custom Brand and Center

Navbar with custom brand, center links, and end content.

<Navbar
  brand={<a class="btn btn-ghost text-xl" href="#">MyApp</a>}
  center={<span class="text-sm">Search...</span>}
  end={<Button variant="primary" size="sm">New</Button>}
/>