@atlaskit/side-navigation/constellation/index/examples.mdx

A highly composable side navigation component that supports nested views.

---
order: 0
---

import ButtonItemExample from '../../examples/constellation/button-item';
import ContainerExample from '../../examples/constellation/container';
import ContentExample from '../../examples/constellation/content';
import CustomItemExample from '../../examples/constellation/custom-item';
import DefaultExample from '../../examples/constellation/default';
import GoBackExample from '../../examples/constellation/go-back';
import HeaderAndFooterExample from '../../examples/constellation/header-and-footer';
import LinkItemExample from '../../examples/constellation/link-item';
import LoadingExample from '../../examples/constellation/loading';
import NestedExample from '../../examples/constellation/nested';
import SectionExample from '../../examples/constellation/section';

## Default

This side navigation example shows all of the [components](#side-navigation-components) and
[items](#side-navigation-items) composed together.

<Example Component={DefaultExample} packageName="@atlaskit/side-navigation" />

## Side navigation components

### Container

Uses 100% of its parent's height and width, so make sure to place it into an element with explicit
values set.

The minimum width of the container is `240px`.

<Example Component={ContainerExample} packageName="@atlaskit/side-navigation" />

### Header and footer

Use `NavigationHeader` and `NavigationFooter` to customise the header and footer.

<Example Component={HeaderAndFooterExample} packageName="@atlaskit/side-navigation" />

### Content

This is used as the container for [navigation items](#side-navigation-items). For nested views see
the [nested navigation example](#nested-navigation).

<Example Component={ContentExample} packageName="@atlaskit/side-navigation" />

### Section

This is used to separate items into sections. Using the `title` prop makes a section implicitly
group the items for assistive technology such as screen readers with no extra work required.

<Example Component={SectionExample} packageName="@atlaskit/side-navigation" />

### Nested navigation

Use `NestableNavigationContent` if you need a container for navigation items with nested views.

<Example Component={NestedExample} packageName="@atlaskit/side-navigation" />

## Side navigation items

Granular items that can be rendered as part of the navigation experience.

You must use the `Section` component to ensure consistent spacing around blocks of items.

### Go back item

Use the go back item to provide a customized "go back" button in nested navigations.

<Example Component={GoBackExample} packageName="@atlaskit/side-navigation" />

### Link item

This renders an item wrapped in an anchor tag, useful when you have an item that should navigate to
another page using native browser navigation.

For custom SPA transitions use a custom item with the respective router logic, following the
[custom item example](#custom-item).

<Example Component={LinkItemExample} packageName="@atlaskit/side-navigation" />

### Custom item

This handles use cases where a custom router link component is needed.

The custom component receives all overflow props passed to the custom item component. When using
TypeScript this will add the custom component props to the root component props type for type
safety.

<Example Component={CustomItemExample} packageName="@atlaskit/side-navigation" />

### Button item

This renders an item wrapped in a button tag. Use this when an action does something other than
navigating to another page.

<Example Component={ButtonItemExample} packageName="@atlaskit/side-navigation" />

## Loading

Use loading skeletons to reduce the perceived loading time.

<Example Component={LoadingExample} packageName="@atlaskit/side-navigation" />