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

The latest navigation system for Atlassian apps.

---
order: 1
---

import SectionMessage from '@atlaskit/section-message';

Navigation is how users get around a site to complete their tasks. The `navigation-system` package
provides the following:

- [Layout](/components/navigation-system/layout) defines a page’s structure and the areas for
  navigation and content.
- [Top nav items](/components/navigation-system/top-nav-items) provide familiar actions and
  utilities in the top nav.

For more navigation components, see
[navigation guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).

<SectionMessage title="Required: Compiled CSS configuration">
	<p>
		Compiled CSS must be configured in your application to ensure styles are correctly applied. See
		the <a href="/get-started/develop#set-up-your-bundling-environment">get started page</a> for
		steps.
	</p>
	<p>
		For Atlassian staff, you can also refer to{' '}
		<a href="https://go.atlassian.com/configure-compiled" target="_blank">
			go/configure-compiled
		</a>
	</p>
</SectionMessage>

## Examples

See the full screen [interactive example](https://go.atlassian.com/nav4-interactive-example).

## Related

- [Layout](/components/navigation-system/layout)
- [Top nav items](/components/navigation-system/top-nav-items)
- [Navigation resources (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE)