@neynar/ui/llm-docs/menubar-sub-content.llm.md

React UI component library built on shadcn/ui and Tailwind CSS

# MenubarSubContent

**Type**: component

Content container for a submenu. Contains the menu items that appear when a MenubarSubTrigger is hovered or focused. Supports all the same content as MenubarContent. Automatically positioned to avoid viewport collisions.

## JSX Usage

```jsx
import { MenubarSubContent } from '@neynar/ui';

<MenubarSubContent
  className="value"
  align={value}
  alignOffset={0}
  sideOffset={0}
  side={value}
  avoidCollisions={true}
  collisionBoundary={value}
  arrowPadding={0}
  sticky={value}
  hideWhenDetached={true}
  loop={true}
  onEscapeKeyDown={handleEscapeKeyDown}
  onPointerDownOutside={handlePointerDownOutside}
  onFocusOutside={handleFocusOutside}
  onInteractOutside={handleInteractOutside}
  forceMount={value}
/>
```

## Component Props

### className
- **Type**: `string`
- **Required**: No
- **Description**: Additional CSS classes to apply to the sub-content container

### align
- **Type**: `"start" | "center" | "end"`
- **Required**: No
- **Description**: The preferred alignment against the trigger. May change when collisions occur

### alignOffset
- **Type**: `number`
- **Required**: No
- **Description**: An offset in pixels from the "start" or "end" alignment options

### sideOffset
- **Type**: `number`
- **Required**: No
- **Description**: The distance in pixels from the trigger

### side
- **Type**: `"top" | "right" | "bottom" | "left"`
- **Required**: No
- **Description**: The preferred side of the trigger to render against when open

### avoidCollisions
- **Type**: `boolean`
- **Required**: No
- **Description**: When true, overrides the side and align preferences to prevent collisions with viewport edges

### collisionBoundary
- **Type**: `Element | null | Array<Element | null>`
- **Required**: No
- **Description**: The element used as the collision boundary for positioning

### arrowPadding
- **Type**: `number`
- **Required**: No
- **Description**: No description available

### sticky
- **Type**: `"partial" | "always"`
- **Required**: No
- **Description**: No description available

### hideWhenDetached
- **Type**: `boolean`
- **Required**: No
- **Description**: No description available

### loop
- **Type**: `boolean`
- **Required**: No
- **Description**: Whether keyboard navigation should loop from last item to first, and vice versa

### onEscapeKeyDown
- **Type**: `(event: KeyboardEvent) => void`
- **Required**: No
- **Description**: Event handler called when the escape key is down

### onPointerDownOutside
- **Type**: `(
    event: CustomEvent<{ originalEvent: PointerEvent }>,
  ) => void`
- **Required**: No
- **Description**: Event handler called when a pointerdown event happens outside of the component

### onFocusOutside
- **Type**: `(event: CustomEvent<{ originalEvent: FocusEvent }>) => void`
- **Required**: No
- **Description**: Event handler called when focus moves outside of the component

### onInteractOutside
- **Type**: `(
    event: CustomEvent<{ originalEvent: PointerEvent | FocusEvent }>,
  ) => void`
- **Required**: No
- **Description**: Event handler called when an interaction happens outside the component

### forceMount
- **Type**: `true`
- **Required**: No
- **Description**: No description available

## Examples

```tsx
<MenubarSubContent>
  <MenubarItem>document1.txt</MenubarItem>
  <MenubarItem>document2.txt</MenubarItem>
  <MenubarItem>document3.txt</MenubarItem>
</MenubarSubContent>
```
/