Skip to main content
ninna-ui
Use Case

Build a Navigation Bar with React and Tailwind CSS v4

Build a responsive, accessible navigation bar with mobile menu, dropdown, and active link states — using Ninna UI components and Tailwind v4.

Navigation bar requirements

A good navigation bar needs: responsive layout (desktop horizontal, mobile drawer), accessible dropdown menus, active link indicators, and proper ARIA (nav role, aria-current for active page).

1. Desktop navigation

Use HStack for horizontal layout with Link components:

import { Link } from "react-router";
import { HStack, Container } from "@ninna-ui/layout";
import { Button } from "@ninna-ui/primitives";

<Container>
  <HStack justify="between" className="h-16">
    <Link to="/" className="font-bold text-lg">MyApp</Link>
    <HStack gap="6">
      <Link to="/dashboard" className="text-sm hover:text-primary">Dashboard</Link>
      <Link to="/settings" className="text-sm hover:text-primary">Settings</Link>
      <Button color="primary" size="sm">Sign up</Button>
    </HStack>
  </HStack>
</Container>

2. Mobile drawer menu

Use Drawer from @ninna-ui/overlays for the mobile menu. It handles focus trapping and Escape to close:

import { Drawer } from "@ninna-ui/overlays";
import { IconButton } from "@ninna-ui/primitives";
import { Menu } from "lucide-react";

<Drawer>
  <Drawer.Trigger asChild>
    <IconButton variant="ghost" aria-label="Open menu" className="md:hidden">
      <Menu className="size-5" />
    </IconButton>
  </Drawer.Trigger>
  <Drawer.Content>
    <VStack gap="4" className="p-6">
      <Link to="/dashboard">Dashboard</Link>
      <Link to="/settings">Settings</Link>
    </VStack>
  </Drawer.Content>
</Drawer>

3. Dropdown menu

Use DropdownMenu from @ninna-ui/overlays for user account menus:

import { DropdownMenu } from "@ninna-ui/overlays";
import { Avatar } from "@ninna-ui/primitives";

<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <button><Avatar name="Jane Doe" size="sm" /></button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content align="end">
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Settings</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Sign out</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

4. Active link with aria-current

Use NavLink from react-router to set aria-current on the active page. This tells screen readers which page is current:

import { NavLink } from "react-router";

<NavLink to="/dashboard" className={({ isActive }) => isActive ? "text-primary font-medium" : "hover:text-primary"}>
  Dashboard
</NavLink>

Component Docs

DrawerDropdownMenuAvatar

FAQ