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.
- [Side nav items](/components/navigation-system/side-nav-items) create different sections, actions,
  and links in the side nav.
- [Top nav items](/components/navigation-system/top-nav-items) provide familiar actions and
  utilities in the top nav.

For ready-made navigation experiences see
[navigation guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/GLOBALNAV/pages/5104144812/Nav4+resources+for+makers).

<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

- <a href="https://go.atlassian.com/nav4-interactive-example" target="_blank">
  	Full screen interactive example
  </a>
  (only available for Atlassian employees at this stage).

## Related

- [Layout](/components/navigation-system/layout)
- [Side nav items](/components/navigation-system/side-nav-items)
- [Top nav items](/components/navigation-system/top-nav-items)
- [Navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/spaces/GLOBALNAV/pages/5104144812/Nav4+resources+for+makers)
