@atlaskit/navigation-system/constellation/top-nav-items/code.mdx

The latest navigation system for Atlassian apps.

---
title: Top nav items
description: Buttons and elements for the top nav.
order: 2
props:
  packageName: '@atlaskit/navigation-system/top-nav-items'
  exports:
    - AppSwitcher
    - AppLogo
    - CustomLogo
    - Notifications
    - Profile
    - Settings
    - EndItem
    - Help
    - CreateButton
    - LogIn
    - Search
    - ChatButton
---

## Props

### AppSwitcher

The trigger button for the app switcher. Use the optional `icon` prop to replace the default app
switcher icon with a custom visual, such as a product logo.

<TSMorphProps exportName="AppSwitcher" packageName="@atlaskit/navigation-system/top-nav-items" />

### AppLogo

The app logo for the top navigation, when an app logo from `@atlaskit/logo` is used. Use the
optional `secondaryName` prop to display supporting context below the app name in wider viewports.

<TSMorphProps exportName="AppLogo" packageName="@atlaskit/navigation-system/top-nav-items" />

### CustomLogo

The logo for the top navigation, when a custom icon and logo component are used.

<TSMorphProps exportName="CustomLogo" packageName="@atlaskit/navigation-system/top-nav-items" />

### Search

Note: Instead of using this component directly, you may want to use the search component from
`@atlassian/search-page/quick-find` instead.

<TSMorphProps exportName="Search" packageName="@atlaskit/navigation-system/top-nav-items" />

### CreateButton

Note: Instead of using this button directly, you may want to use the create button from
`@atlassian/universal-create` instead.

<TSMorphProps exportName="CreateButton" packageName="@atlaskit/navigation-system/top-nav-items" />

### ChatButton

Instead of using this button directly, you may want to use the chat button from
`@atlassian/conversation-assistant-ui-components` instead.

<TSMorphProps exportName="ChatButton" packageName="@atlaskit/navigation-system/top-nav-items" />

### Notifications

The trigger button for the notifications menu.

<TSMorphProps exportName="Notifications" packageName="@atlaskit/navigation-system/top-nav-items" />

### Help

The trigger button for the help menu.

<TSMorphProps exportName="Help" packageName="@atlaskit/navigation-system/top-nav-items" />

### Settings

The trigger button for the settings menu.

<TSMorphProps exportName="Settings" packageName="@atlaskit/navigation-system/top-nav-items" />

### Profile

The trigger button for the profile menu.

Note: Instead of using this button directly, you may want to use `@atlassian/account/nav4` instead.

<TSMorphProps exportName="Profile" packageName="@atlaskit/navigation-system/top-nav-items" />

### LogIn

Note: Instead of using this button directly, you may want to use `@atlassian/account/nav4` instead.

<TSMorphProps exportName="LogIn" packageName="@atlaskit/navigation-system/top-nav-items" />

### EndItem

If none of the provided top nav items components are suitable, you can create your own using
`EndItem`.

<TSMorphProps exportName="EndItem" packageName="@atlaskit/navigation-system/top-nav-items" />