# Hamburger

Source: https://payloadcms.com/docs/ui-components/hamburger

The `Hamburger` component displays the icon used to represent open and closed navigation states in the Payload Admin Panel.

## Import

```tsx
import { Hamburger } from '@payloadcms/ui'
```

## States

**Implementation**

```tsx
<Hamburger />
<Hamburger isActive />
<Hamburger closeIcon="collapse" isActive />
```

**Styling**

Customize the Hamburger’s control surface, icon color, and icon scale without replacing its state icons.

```css
.hamburger {
  --hamburger-size: 1.25rem;
  background: #f3f1ff;
  color: #5947e5;
  box-shadow: 0 0 0 1px #c8c0ff;
}

.hamburger:hover {
  background: #ded8ff;
  box-shadow: 0 0 0 1px #6d5dfc;
}
```

- `--hamburger-size`: Open and close icon dimensions.
- `background`: Control surface.
- `color`: Icon color.
- `box-shadow`: Control outline.

`Hamburger` renders the visual state only. Place it inside the button that controls your navigation and manage `isActive` from that control's state.

## Common props

These are the props most commonly used with this component. See its exported types in `@payloadcms/ui` for the complete list.

| Prop        | Type                | Default | Description                                     |
| ----------- | ------------------- | ------- | ----------------------------------------------- |
| `isActive`  | `boolean`           | `false` | Switches from the menu icon to a close icon.    |
| `closeIcon` | `'x' \| 'collapse'` | `'x'`   | Selects the icon displayed in the active state. |