Navbar() — ui Function Reference

Architecture documentation for the Navbar() function in github.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Navbar() — ui Function Reference

Dependency Diagram

graph TD
  a7cd51d0_096c_b951_c87c_a1866a22e672["Navbar()"]
  ea47a897_f8a1_c141_0a31_7faa4e84543e["github.tsx"]
  a7cd51d0_096c_b951_c87c_a1866a22e672 -->|defined in| ea47a897_f8a1_c141_0a31_7faa4e84543e
  style a7cd51d0_096c_b951_c87c_a1866a22e672 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/github.tsx lines 720–1130

function Navbar() {
  return (
    <Example title="Account Menu">
      <header className="flex h-14 w-full items-center gap-2">
        <Drawer direction="left">
          <DrawerTrigger asChild>
            <Button variant="outline" size="icon">
              <IconPlaceholder
                lucide="MenuIcon"
                hugeicons="Menu09Icon"
                tabler="IconMenu"
                phosphor="ListIcon"
                remixicon="RiListUnordered"
              />
              <span className="sr-only">Open menu</span>
            </Button>
          </DrawerTrigger>
          <DrawerContent className="max-w-72">
            <DrawerHeader className="flex flex-row items-center justify-between px-5 pb-0">
              <DrawerTitle>Menu</DrawerTitle>
              <DrawerClose asChild>
                <Button variant="ghost" size="icon-sm">
                  <IconPlaceholder
                    lucide="XIcon"
                    tabler="IconX"
                    hugeicons="Cancel01Icon"
                    phosphor="XIcon"
                    remixicon="RiCloseLine"
                  />
                  <span className="sr-only">Close</span>
                </Button>
              </DrawerClose>
            </DrawerHeader>
            <div className="p-2">
              <ItemGroup className="gap-px">
                <Item render={<a href="#" />} size="xs">
                  <ItemMedia variant="icon">
                    <IconPlaceholder
                      lucide="HomeIcon"
                      tabler="IconHome"
                      hugeicons="HomeIcon"
                      phosphor="HouseIcon"
                      remixicon="RiHomeLine"
                    />
                  </ItemMedia>
                  <ItemContent>
                    <ItemTitle>Home</ItemTitle>
                  </ItemContent>
                </Item>
                <Item render={<a href="#" />} size="xs">
                  <ItemMedia variant="icon">
                    <IconPlaceholder
                      lucide="CircleIcon"
                      tabler="IconCircle"
                      hugeicons="CircleIcon"
                      phosphor="CircleIcon"
                      remixicon="RiCircleLine"
                    />
                  </ItemMedia>
                  <ItemContent>
                    <ItemTitle>Issues</ItemTitle>
                  </ItemContent>
                </Item>
                <Item render={<a href="#" />} size="xs">
                  <ItemMedia variant="icon">
                    <IconPlaceholder
                      lucide="GitBranchIcon"
                      tabler="IconGitBranch"
                      hugeicons="GitBranchIcon"
                      phosphor="GitBranchIcon"
                      remixicon="RiGitBranchLine"
                    />
                  </ItemMedia>
                  <ItemContent>
                    <ItemTitle>Pull requests</ItemTitle>
                  </ItemContent>
                </Item>
                <Item render={<a href="#" />} size="xs">
                  <ItemMedia variant="icon">
                    <IconPlaceholder
                      lucide="LayoutGridIcon"