# Container/TopNavigation

> Props: container-topnavigation.props.txt

## Examples


### Base

```tsx
{
  render: () => <Stack direction='column' gap={12}>
      <TopNavigation left={<IconArrowChevronLeft size={24} />} title='Title' right={<TextButton kind='link'>Label</TextButton>} />
      <TopNavigation left={<IconX size={24} />} title='Title' right={<TextButton kind='link'>Label</TextButton>} />
    </Stack>
}
```

### Empty Right

```tsx
{
  args: {
    left: <IconArrowChevronLeft size={24} />,
    title: 'Title'
  }
}
```

### Long Title

```tsx
{
  render: () => <div style={{
    maxWidth: 400
  }}>
      <TopNavigation left={<IconArrowChevronLeft size={24} />} title='Long Title Long Title Long Title Long Title Long Title Long Title' right={<TextButton kind='link'>Label</TextButton>} />
    </div>
}
```

### Multiple

```tsx
{
  args: {
    left: <>
        <IconArrowChevronLeft size={24} />
        <TextButton kind='link'>Label</TextButton>
      </>,
    title: 'Title',
    right: <>
        <TextButton kind='link'>Label</TextButton>
        <IconArrowChevronRight size={24} />
      </>
  }
}
```

### Only Left

```tsx
{
  args: {
    left: <IconArrowChevronLeft size={24} />
  }
}
```

### Only Right

```tsx
{
  args: {
    right: <TextButton kind='link'>Label</TextButton>
  }
}
```

### Only Title

```tsx
{
  args: {
    title: 'Title'
  }
}
```