# Layout Components

Components for organizing and structuring menu layout including groups, labels, separators, and arrows. These components help create well-organized and visually structured dropdown menus.

## Capabilities

### DropdownMenuGroup (Group)

Container component for grouping related menu items together, providing semantic organization.

```typescript { .api }
/**
 * Container for grouping related menu items
 * Provides semantic grouping without visual changes
 */
interface DropdownMenuGroupProps {
  children?: React.ReactNode;
}

const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps>;
```

**Usage Examples:**

```typescript
<DropdownMenu.Content>
  <DropdownMenu.Group>
    <DropdownMenu.Item>New File</DropdownMenu.Item>
    <DropdownMenu.Item>New Folder</DropdownMenu.Item>
  </DropdownMenu.Group>
  
  <DropdownMenu.Separator />
  
  <DropdownMenu.Group>
    <DropdownMenu.Item>Cut</DropdownMenu.Item>
    <DropdownMenu.Item>Copy</DropdownMenu.Item>
    <DropdownMenu.Item>Paste</DropdownMenu.Item>
  </DropdownMenu.Group>
</DropdownMenu.Content>
```

### DropdownMenuLabel (Label)

Label component for providing section headers and descriptions within menu groups.

```typescript { .api }
/**
 * Label component for menu sections
 * Provides descriptive text that doesn't receive focus
 * @param asChild - Compose with child element
 */
interface DropdownMenuLabelProps {
  asChild?: boolean;
  children?: React.ReactNode;
}

const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps>;
```

**Usage Examples:**

```typescript
<DropdownMenu.Content>
  <DropdownMenu.Label>File Operations</DropdownMenu.Label>
  <DropdownMenu.Item>New File</DropdownMenu.Item>
  <DropdownMenu.Item>Open File</DropdownMenu.Item>
  
  <DropdownMenu.Separator />
  
  <DropdownMenu.Label>Edit Operations</DropdownMenu.Label>
  <DropdownMenu.Item>Cut</DropdownMenu.Item>
  <DropdownMenu.Item>Copy</DropdownMenu.Item>
</DropdownMenu.Content>

// Custom label using asChild
<DropdownMenu.Label asChild>
  <h3 className="menu-section-header">Recent Files</h3>
</DropdownMenu.Label>
```

### DropdownMenuSeparator (Separator)

Visual separator component for creating distinct sections within the menu.

```typescript { .api }
/**
 * Visual separator for creating menu sections
 * Renders as a horizontal line between menu items
 */
interface DropdownMenuSeparatorProps {
  children?: React.ReactNode;
}

const DropdownMenuSeparator: React.ForwardRefExoticComponent<DropdownMenuSeparatorProps>;
```

**Usage Examples:**

```typescript
<DropdownMenu.Content>
  <DropdownMenu.Item>New</DropdownMenu.Item>
  <DropdownMenu.Item>Open</DropdownMenu.Item>
  
  <DropdownMenu.Separator />
  
  <DropdownMenu.Item>Settings</DropdownMenu.Item>
  <DropdownMenu.Item>Help</DropdownMenu.Item>
  
  <DropdownMenu.Separator />
  
  <DropdownMenu.Item>Quit</DropdownMenu.Item>
</DropdownMenu.Content>
```

### DropdownMenuArrow (Arrow)

Arrow component that points from the menu content to the trigger element.

```typescript { .api }
/**
 * Arrow pointing from content to trigger element
 * @param width - Width of the arrow in pixels
 * @param height - Height of the arrow in pixels
 * @param asChild - Compose with child element
 */
interface DropdownMenuArrowProps {
  width?: number;
  height?: number;
  asChild?: boolean;
}

const DropdownMenuArrow: React.ForwardRefExoticComponent<DropdownMenuArrowProps>;
```

**Usage Examples:**

```typescript
<DropdownMenu.Content>
  <DropdownMenu.Arrow />
  <DropdownMenu.Item>Menu Item</DropdownMenu.Item>
</DropdownMenu.Content>

// Custom sized arrow
<DropdownMenu.Content>
  <DropdownMenu.Arrow width={10} height={5} />
  <DropdownMenu.Item>Menu Item</DropdownMenu.Item>
</DropdownMenu.Content>

// Custom arrow using asChild
<DropdownMenu.Content>
  <DropdownMenu.Arrow asChild>
    <div className="custom-arrow" />
  </DropdownMenu.Arrow>
  <DropdownMenu.Item>Menu Item</DropdownMenu.Item>
</DropdownMenu.Content>
```

## Complete Layout Example

```typescript
function ComplexDropdownMenu() {
  const [showGrid, setShowGrid] = React.useState(false);
  const [viewMode, setViewMode] = React.useState('list');

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>View Options</DropdownMenu.Trigger>
      
      <DropdownMenu.Portal>
        <DropdownMenu.Content>
          <DropdownMenu.Arrow />
          
          <DropdownMenu.Label>View Settings</DropdownMenu.Label>
          
          <DropdownMenu.Group>
            <DropdownMenu.CheckboxItem 
              checked={showGrid}
              onCheckedChange={setShowGrid}
            >
              <DropdownMenu.ItemIndicator>✓</DropdownMenu.ItemIndicator>
              Show Grid
            </DropdownMenu.CheckboxItem>
          </DropdownMenu.Group>
          
          <DropdownMenu.Separator />
          
          <DropdownMenu.Label>View Mode</DropdownMenu.Label>
          
          <DropdownMenu.RadioGroup value={viewMode} onValueChange={setViewMode}>
            <DropdownMenu.RadioItem value="list">
              <DropdownMenu.ItemIndicator>●</DropdownMenu.ItemIndicator>
              List View
            </DropdownMenu.RadioItem>
            <DropdownMenu.RadioItem value="grid">
              <DropdownMenu.ItemIndicator>●</DropdownMenu.ItemIndicator>
              Grid View
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
          
          <DropdownMenu.Separator />
          
          <DropdownMenu.Group>
            <DropdownMenu.Item>Refresh</DropdownMenu.Item>
            <DropdownMenu.Item>Reset View</DropdownMenu.Item>
          </DropdownMenu.Group>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}
```

## Component Aliases

```typescript { .api }
// Short aliases for composition patterns
const Group = DropdownMenuGroup;
const Label = DropdownMenuLabel;
const Separator = DropdownMenuSeparator;
const Arrow = DropdownMenuArrow;
```

These layout components help create well-structured and visually organized dropdown menus with proper semantic grouping and visual separation.