SeparatorMenu() — ui Function Reference

Architecture documentation for the SeparatorMenu() function in separator-menu.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ SeparatorMenu() — ui Function Reference

Dependency Diagram

graph TD
  72d15556_2c90_1ae5_455a_935f9dc14222["SeparatorMenu()"]
  f27f78af_4e65_7713_6d53_c3d756ac0297["separator-menu.tsx"]
  72d15556_2c90_1ae5_455a_935f9dc14222 -->|defined in| f27f78af_4e65_7713_6d53_c3d756ac0297
  style 72d15556_2c90_1ae5_455a_935f9dc14222 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/separator-menu.tsx lines 3–26

export function SeparatorMenu() {
  return (
    <div className="flex items-center gap-2 text-sm md:gap-4">
      <div className="flex flex-col gap-1">
        <span className="font-medium">Settings</span>
        <span className="text-muted-foreground text-xs">
          Manage preferences
        </span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col gap-1">
        <span className="font-medium">Account</span>
        <span className="text-muted-foreground text-xs">
          Profile & security
        </span>
      </div>
      <Separator orientation="vertical" className="hidden md:block" />
      <div className="hidden flex-col gap-1 md:flex">
        <span className="font-medium">Help</span>
        <span className="text-muted-foreground text-xs">Support & docs</span>
      </div>
    </div>
  )
}