TopNavbar

Composition

TopNavbar exposes the complete structure as compound components:

TopNavbar.Root
└── TopNavbar.Container
    ├── TopNavbar.Leading
    │   ├── TopNavbar.Brand
    │   └── TopNavbar.Navigation
    │       ├── TopNavbar.List
    │       │   └── TopNavbar.Item
    │       │       ├── TopNavbar.Trigger
    │       │       └── TopNavbar.Content
    │       └── TopNavbar.Viewport
    └── TopNavbar.Actions

Usage

import { GiddaaLogo } from "@giddaa-housing/ui/logo";
import { TopNavbar } from "@giddaa-housing/ui/top-navbar";

<TopNavbar.Root>
	<TopNavbar.Container>
		<TopNavbar.Leading>
			<TopNavbar.Brand href="/" aria-label="Giddaa home">
				<GiddaaLogo />
			</TopNavbar.Brand>

			<TopNavbar.Navigation aria-label="Main navigation">
				<TopNavbar.List>
					<TopNavbar.Item value="homes">
						<TopNavbar.Trigger active>Homes</TopNavbar.Trigger>
						<TopNavbar.Content>
							<TopNavbar.MenuGrid>
								<li>
									<TopNavbar.MenuLink href="/homes" featured>
										<TopNavbar.MenuText>
											<TopNavbar.MenuTitle>
												Browse all homes
											</TopNavbar.MenuTitle>
											<TopNavbar.MenuDescription>
												Explore verified homes in every location.
											</TopNavbar.MenuDescription>
										</TopNavbar.MenuText>
									</TopNavbar.MenuLink>
								</li>
							</TopNavbar.MenuGrid>
						</TopNavbar.Content>
					</TopNavbar.Item>
				</TopNavbar.List>
				<TopNavbar.Viewport />
			</TopNavbar.Navigation>
		</TopNavbar.Leading>
	</TopNavbar.Container>
</TopNavbar.Root>;

The example composes TopNavbar for desktop navigation and the separate MobileSidebar component for mobile navigation. Pages that do not render this header can import and position MobileSidebar independently.

Props

Prop/API	Type	Default	Description
`TopNavbar.Root`	`header` props	-	Inherits the surrounding theme scope; wrap it in `.light` or `.dark` to pin one (see Theming).
`TopNavbar.Brand render`	`ReactElement`	native anchor	Replaces the anchor for framework-router integration.
`TopNavbar.Navigation`	Base UI `NavigationMenu.Root` props	-	Owns desktop navigation state and keyboard behavior.
`TopNavbar.Trigger active`	`boolean`	`false`	Applies the active destination pill while retaining Base UI trigger behavior.
`TopNavbar.MenuLink featured`	`boolean`	`false`	Applies the emphasized menu-card treatment.
`TopNavbar.Viewport`	popup props	-	Renders the portaled, positioned popup and accepts `portalProps`, `positionerProps`, and `viewportProps`. Pass a theme class through `positionerProps` when the page theme is scoped below `<body>`.
`TopNavbar.ActionGroup surface`	`boolean`	`false`	Adds the raised signed-in action surface.
`<TopNavbar />`	`TopNavbarProps`	-	Optional data-driven convenience API built from the same public primitives.

Accessibility

Give TopNavbar.Brand an accessible label, such as aria-label="Giddaa home".
Mark only the current top-level destination with active.
Keep menu titles concise and descriptions useful when read out of visual context.
The desktop menu supports pointer and keyboard navigation through Base UI.
Supply descriptive labels for icon-only controls in TopNavbar.Actions.

Quick Preview

Composition

Usage

Examples

Default Navbar

Props

Accessibility

On this page