Menubar Menu

A navigation component that implements a persistent horizontal bar of top-level application menus.
For more information on this component configuration, visit Radix UI

Disabled

Use the disabled class to disable the component.

Disabled Item

Use the disabled attr or the disabled class to disable an item component.

Sizes

Use the menubar-{size} class to control the component size.

Size values can include:smmd.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-menubar-height-sm: calc(var(--spacing) * 10);
  --ex-menubar-height-md: calc(var(--spacing) * 12);
 
  --ex-menubar-px-sm: calc(var(--spacing) * 1.5);
  --ex-menubar-px-md: calc(var(--spacing) * 2);
 
  --ex-menubar-radius-sm: var(--radius-sm);
  --ex-menubar-radius-md: var(--radius-md);
 
  --ex-menubar-trigger-font-family: var(--font-sans);
  --ex-menubar-trigger-font-weight: var(--font-weight-normal);
 
  --ex-menubar-trigger-font-size-sm: var(--text-xs);
  --ex-menubar-trigger-font-size-md: var(--text-sm);
 
  --ex-menubar-trigger-height-sm: calc(var(--spacing) * 7);
  --ex-menubar-trigger-height-md: calc(var(--spacing) * 8);
 
  --ex-menubar-trigger-gap-sm: calc(var(--spacing) * 1);
  --ex-menubar-trigger-gap-md: calc(var(--spacing) * 1.25);
 
  --ex-menubar-trigger-px-sm: calc(var(--spacing) * 2);
  --ex-menubar-trigger-px-md: calc(var(--spacing) * 2.5);
 
  --ex-menubar-trigger-radius-sm: var(--radius-sm);
  --ex-menubar-trigger-radius-md: var(--radius-md);
 
  --ex-menubar-content-max-w-sm: var(--container-3xs);
  --ex-menubar-content-max-w-md: var(--container-2xs);
 
  --ex-menubar-content-radius-sm: var(--radius-sm);
  --ex-menubar-content-radius-md: var(--radius-sm);
 
  --ex-menubar-content-shadow-sm: var(--shadow-sm);
  --ex-menubar-content-shadow-md: var(--shadow-sm);
 
  --ex-menubar-section-gap-x-sm: calc(var(--spacing) * 1.5);
  --ex-menubar-section-gap-x-md: calc(var(--spacing) * 2);
 
  --ex-menubar-section-px-sm: calc(var(--spacing) * 1.5);
  --ex-menubar-section-px-md: calc(var(--spacing) * 2);
 
  --ex-menubar-section-py-sm: calc(var(--spacing) * 2);
  --ex-menubar-section-py-md: calc(var(--spacing) * 2.5);
 
  --ex-menubar-item-px-sm: calc(var(--spacing) * 2);
  --ex-menubar-item-px-md: calc(var(--spacing) * 2);
 
  --ex-menubar-item-py-sm: var(--spacing);
  --ex-menubar-item-py-md: var(--spacing);
 
  --ex-menubar-item-font-family: var(--font-sans);
  --ex-menubar-item-font-weight: var(--font-weight-normal);
 
  --ex-menubar-item-font-size-sm: var(--text-xs);
  --ex-menubar-item-font-size-md: var(--text-sm);
 
  --ex-menubar-indicator-font-size-sm: var(--text-sm);
  --ex-menubar-indicator-font-size-md: var(--text-base);
 
  --ex-menubar-label-font-family: var(--font-sans);
  --ex-menubar-label-font-weight: var(--font-weight-normal);
  --ex-menubar-label-opacity: var(--ex-options-opacity-muted);
 
  --ex-menubar-label-font-size-sm: var(--text-2xs);
  --ex-menubar-label-font-size-md: var(--text-xs);
 
  --ex-menubar-command-font-family: var(--font-sans);
  --ex-menubar-command-font-weight: var(--font-weight-normal);
  --ex-menubar-command-opacity: var(--ex-options-opacity-muted);
 
  --ex-menubar-command-font-size-sm: var(--text-2xs);
  --ex-menubar-command-font-size-md: var(--text-xs);
 
  --ex-menubar-arrow-height-sm: calc(var(--spacing) * 1.75);
  --ex-menubar-arrow-height-md: calc(var(--spacing) * 1.75);
 
  --ex-menubar-arrow-width-sm: calc(var(--spacing) * 3.5);
  --ex-menubar-arrow-width-md: calc(var(--spacing) * 3.5);
}

API

For more information on this component configuration, visit Radix UI

Menubar

Element	Selector
`Menubar`	`.ex-menubar`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultValue`	`string`
`loop`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`

Prop	Type	Default
`asChild`	`boolean`	`false`
`value`	`string`

Element	Selector
`Menubar.Trigger`	`.ex-menubar-trigger`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`

Prop	Type	Default
`container`	`HTMLElement`	`document.body`
`forceMount`	`boolean`	`false`

Element	Selector
`Menubar.Content`	`.ex-menubar-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`align`	`enum of ["start", "center", "end"]`	`center`
`alignOffset`	`number`	`-8`
`arrowPadding`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`loop`	`boolean`	`false`
`side`	`enum of ["top", "right", "bottom", "left"]`	`bottom`
`sideOffset`	`number`	`6`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onCloseAutoFocus`	`function`
`onFocusOutside`	`function`
`onInteractOutside`	`function`
`onPointerDownOutside`	`function`

Element	Selector
`ContextMenu.Section`	`.ex-menubar-section`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`Menubar.Arrow`	`.ex-menubar-arrow`

Prop	Type	Default
`asChild`	`boolean`	`false`

Element	Selector
`Menubar.Item`	`.ex-menubar-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`onSelect`	`function`

Element	Selector
`Menubar.ItemIndicator`	`.ex-menubar-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`true`

Element	Selector
`Menubar.Label`	`.ex-menubar-label`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`Menubar.Command`	`.ex-menubar-command`

Prop	Type	Default
`as`	`ElementType`	`kbd`
`asChild`	`boolean`	`false`

Element	Selector
`Menubar.Separator`	`.ex-menubar-separator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Element	Selector
`Menubar.RadioGroup`	`.ex-menubar-radio-group`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`

Element	Selector
`Menubar.RadioItem`	`.ex-menubar-radio-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`value`	`string`
`onSelect`	`function`

Element	Selector
`Menubar.CheckboxItem`	`.ex-menubar-checkbox-item`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`
`onCheckedChange`	`function`
`onSelect`	`function`

Menubar Sub

Element	Selector
`Menubar.Sub`	`.ex-menubar-sub`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`	`false`
`open`	`boolean`	`false`
`onOpenChange`	`function`

Menubar Sub Trigger

Element	Selector
`Menubar.SubTrigger`	`.ex-menubar-sub-trigger`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`textValue`	`string`

Menubar Sub Content

Element	Selector
`Menubar.SubContent`	`.ex-menubar-sub-content`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`alignOffset`	`number`	`-8`
`arrowPadding`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`forceMount`	`boolean`	`false`
`hideWhenDetached`	`boolean`	`false`
`loop`	`boolean`	`false`
`sideOffset`	`number`	`8`
`sticky`	`enum of ["always", "partial"]`	`partial`
`onFocusOutside`	`function`
`onInteractOutside`	`function`
`onPointerDownOutside`	`function`

Menubar Menu

Disabled

Disabled Item

Sizes

Customizing

API

Menubar

Menubar Menu

Menubar Menu Trigger

Menubar Menu Portal

Menubar Menu Content

Menubar Menu Section

Menubar Menu Arrow

Menubar Menu Item

Menubar Menu Indicator

Menubar Menu Label

Menubar Menu Command

Menubar Menu Separator

Menubar Menu RadioGroup

Menubar Menu RadioItem

Menubar Menu CheckboxItem

Menubar Sub

Menubar Sub Trigger

Menubar Sub Content