# Project switcher

Shows the current project and opens a menu to switch to another or create one. Place it at the top of a [Sidebar](/components/sidebar.md) or [Top navigation](/components/top-navigation.md).

```tsx
// demo.tsx
import {AddIcon} from '@earendil-works/elanor-icons-react';
import {ProjectSwitcher, Stack, Text} from '@earendil-works/elanor-react';
import {useState} from 'react';

const projects = ['Website redesign', 'Design system'];

export default function ProjectSwitcherDemo() {
  const [project, setProject] = useState('Website redesign');
  const [status, setStatus] = useState('');

  return (
    <Stack gap="small">
      <ProjectSwitcher.Root>
        <ProjectSwitcher.Trigger>{project}</ProjectSwitcher.Trigger>
        <ProjectSwitcher.Portal>
          <ProjectSwitcher.Positioner align="start">
            <ProjectSwitcher.Popup>
              <ProjectSwitcher.Group>
                <ProjectSwitcher.GroupLabel>Projects</ProjectSwitcher.GroupLabel>
                {projects.map((name) => (
                  <ProjectSwitcher.Item
                    key={name}
                    onClick={() => {
                      setProject(name);
                      setStatus(`Switched to ${name}.`);
                    }}
                  >
                    {name}
                  </ProjectSwitcher.Item>
                ))}
              </ProjectSwitcher.Group>
              <ProjectSwitcher.Separator />
              <ProjectSwitcher.Group>
                <ProjectSwitcher.Item
                  icon={<AddIcon />}
                  onClick={() => setStatus('Selected: New project.')}
                >
                  New project
                </ProjectSwitcher.Item>
              </ProjectSwitcher.Group>
            </ProjectSwitcher.Popup>
          </ProjectSwitcher.Positioner>
        </ProjectSwitcher.Portal>
      </ProjectSwitcher.Root>
      <Text role="status">{status}</Text>
    </Stack>
  );
}
```

## Usage

```tsx
import {ProjectSwitcher} from '@earendil-works/elanor-react';

<ProjectSwitcher.Root>
  <ProjectSwitcher.Trigger>Website redesign</ProjectSwitcher.Trigger>
  <ProjectSwitcher.Portal>
    <ProjectSwitcher.Positioner align="start">
      <ProjectSwitcher.Popup>
        <ProjectSwitcher.Group>
          <ProjectSwitcher.GroupLabel />
          <ProjectSwitcher.Item />
        </ProjectSwitcher.Group>
      </ProjectSwitcher.Popup>
    </ProjectSwitcher.Positioner>
  </ProjectSwitcher.Portal>
</ProjectSwitcher.Root>;
```

Apart from Trigger, the parts are the [Menu](/components/menu.md) parts. The trigger ends with a chevron; pass `indicator={null}` to hide it or another icon to replace it.

## API

### `ProjectSwitcher.Root`

Accepts Base UI [`Menu.Root`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Trigger`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | The current project name. |
| `indicator` | `ReactNode` | `<KeyboardArrowDownIcon aria-hidden="true" />` | Icon after the name. Pass `null` to hide it. |

Also accepts Base UI [`Menu.Trigger`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Portal`

Accepts Base UI [`Menu.Portal`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Positioner`

Accepts Base UI [`Menu.Positioner`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Popup`

Accepts Base UI [`Menu.Popup`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Group`

Accepts Base UI [`Menu.Group`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.GroupLabel`

Accepts Base UI [`Menu.GroupLabel`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Item`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | The item label. |
| `icon` | `ReactNode` | - | Decorative icon before the label. |
| `endAdornment` | `ReactNode` | - | Content after the label, such as an icon. |

Also accepts Base UI [`Menu.Item`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.LinkItem`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - | The item label. |
| `icon` | `ReactNode` | - | Decorative icon before the label. |
| `endAdornment` | `ReactNode` | - | Content after the label, such as an icon. |

Also accepts Base UI [`Menu.LinkItem`](https://base-ui.com/react/components/menu.md) props.

### `ProjectSwitcher.Separator`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal'` | - | Only horizontal is supported. |

Also accepts Base UI [`Menu`](https://base-ui.com/react/components/menu.md) props.