> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/components/layout.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Layout

Organize headers, sidebars, content and footers.

## Basic usage

Compose the page with Header, Sider, Content and Footer. The nested horizontal layout places the sidebar next to the content.


Header

Sidebar

Content

Footer

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/layout/basic.tsx"
import { Layout, Text } from '@ifhover/leaf-ui';

export function LayoutBasic() {
  return (
    <Layout>
      <Layout.Header>
        <Text>Header</Text>
      </Layout.Header>
      <Layout direction="horizontal">
        <Layout.Sider width={140}>Sidebar</Layout.Sider>
        <Layout.Content>Content</Layout.Content>
      </Layout>
      <Layout.Footer>Footer</Layout.Footer>
    </Layout>
  );
}
```

Expand code

## Responsive sidebar

Collapse the sidebar manually or automatically on narrow screens; the menu follows with icon navigation.


Overview

Projects

Collapse sidebar

### Overview

Select a navigation item to view its content.

advanced.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/layout/advanced.tsx"
import { Card, Layout, Menu, useBreakpoint } from '@ifhover/leaf-ui';

import { Folder, LayoutDashboard } from 'lucide-react';

import { useState } from 'react';

export function LayoutResponsive() {
  const [collapsed, setCollapsed] = useState(false);
  const { sm } = useBreakpoint();
  const compact = collapsed || !sm;
  const [selected, setSelected] = useState('overview');
  const items = [
    { key: 'overview', label: 'Overview', icon: <LayoutDashboard /> },
    { key: 'projects', label: 'Projects', icon: <Folder /> },
  ];
  return (
    <Layout direction="horizontal">
      <Layout.Sider
        width={180}
        collapsedWidth={64}
        collapsed={collapsed}
        onCollapse={setCollapsed}
        collapsible
        breakpoint={575}
      >
        <Menu
          mode="inline"
          collapsed={compact}
          selectedKey={selected}
          onSelect={setSelected}
          items={items}
        />
      </Layout.Sider>
      <Layout.Content>
        <Card title={items.find((item) => item.key === selected)?.label}>
          Select a navigation item to view its content.
        </Card>
      </Layout.Content>
    </Layout>
  );
}
```

Expand code

## Usage

Compose Layout.Header, Layout.Sider, Layout.Content and Layout.Footer. Use direction="horizontal" for side-by-side regions. Control the sidebar with collapsed, or set breakpoint for automatic collapse.

## Types

Import these types for data, callbacks and refs.

```ts
import type { LayoutProps, LayoutSiderProps } from '@ifhover/leaf-ui';
```

## LayoutProps API

| Property    | Type                         | Default      | Description                  |
| ----------- | ---------------------------- | ------------ | ---------------------------- |
| `direction` | `'horizontal' \| 'vertical'` | `'vertical'` | Layout or movement direction |

## LayoutSiderProps API

| Property           | Type                           | Default | Description                           |
| ------------------ | ------------------------------ | ------- | ------------------------------------- |
| `width`            | `number \| string`             | `220`   | Width, numbers are in pixels          |
| `collapsedWidth`   | `number \| string`             | `64`    | Collapsed width                       |
| `collapsed`        | `boolean`                      | —       | Controlled collapsed state            |
| `defaultCollapsed` | `boolean`                      | `false` | Initial collapsed state               |
| `collapsible`      | `boolean`                      | `false` | Show collapse controls                |
| `breakpoint`       | `number`                       | —       | Viewport width that triggers collapse |
| `onCollapse`       | `(collapsed: boolean) => void` | —       | Collapsed state changes               |
| `trigger`          | `ReactNode`                    | —       | Custom trigger content                |