MenubarSides() — ui Function Reference

Architecture documentation for the MenubarSides() function in menubar-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ MenubarSides() — ui Function Reference

Dependency Diagram

graph TD
  8e0a2f4b_a337_4861_5bad_82e4f95e6272["MenubarSides()"]
  2f385f3b_182c_b423_46e9_5c0eabdf26cc["menubar-example.tsx"]
  8e0a2f4b_a337_4861_5bad_82e4f95e6272 -->|defined in| 2f385f3b_182c_b423_46e9_5c0eabdf26cc
  style 8e0a2f4b_a337_4861_5bad_82e4f95e6272 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/menubar-example.tsx lines 96–128

function MenubarSides() {
  return (
    <Example title="Sides" containerClassName="col-span-2">
      <div className="flex flex-wrap justify-center gap-2">
        {(
          [
            "inline-start",
            "left",
            "top",
            "bottom",
            "right",
            "inline-end",
          ] as const
        ).map((side) => (
          <Menubar key={side}>
            <MenubarMenu>
              <MenubarTrigger className="capitalize">
                {side.replace("-", " ")}
              </MenubarTrigger>
              <MenubarContent side={side}>
                <MenubarGroup>
                  <MenubarItem>New Tab</MenubarItem>
                  <MenubarItem>New Window</MenubarItem>
                  <MenubarItem>New Incognito Window</MenubarItem>
                </MenubarGroup>
              </MenubarContent>
            </MenubarMenu>
          </Menubar>
        ))}
      </div>
    </Example>
  )
}