Navbar() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Navbar() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/github.tsx lines 709–1135

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 asChild size="xs">
                  <a href="#">
                    <ItemMedia variant="icon">
                      <IconPlaceholder
                        lucide="HomeIcon"
                        tabler="IconHome"
                        hugeicons="HomeIcon"
                        phosphor="HouseIcon"
                        remixicon="RiHomeLine"
                      />
                    </ItemMedia>
                    <ItemContent>
                      <ItemTitle>Home</ItemTitle>
                    </ItemContent>
                  </a>
                </Item>
                <Item asChild size="xs">
                  <a href="#">
                    <ItemMedia variant="icon">
                      <IconPlaceholder
                        lucide="CircleIcon"
                        tabler="IconCircle"
                        hugeicons="CircleIcon"
                        phosphor="CircleIcon"
                        remixicon="RiCircleLine"
                      />
                    </ItemMedia>
                    <ItemContent>
                      <ItemTitle>Issues</ItemTitle>
                    </ItemContent>
                  </a>
                </Item>
                <Item asChild size="xs">
                  <a href="#">
                    <ItemMedia variant="icon">
                      <IconPlaceholder
                        lucide="GitBranchIcon"
                        tabler="IconGitBranch"
                        hugeicons="GitBranchIcon"
                        phosphor="GitBranchIcon"
                        remixicon="RiGitBranchLine"
                      />
                    </ItemMedia>
                    <ItemContent>
                      <ItemTitle>Pull requests</ItemTitle>
                    </ItemContent>