Navigation

Guide people through experiences and help users find what they need with navigation. The components used for high-level navigation within the products are the application header, sidebar, horizontal navigation and vertical navigation.

Here's a quick guide to each of them:

Component Description Usage notes
Application header A branded header that allows the user to navigate between top-level entities (such as projects, spaces and repos), and to access global actions such as administration and search. Only global navigation elements should appear in the application header.
Sidebar A grey sidebar on the left side of the screen that allows users to navigate within projects, spaces and repositories. Only in-product entities such as projects, spaces and repos should have a sidebar.
Horizontal navigation Horizontal navigation that appears directly under a page header and allows for navigating between page contexts within the same application. Use tabs instead if you're switching views of the same context. Consider vertical navigation if there are more than 10 items, or if you need to group items.
Vertical navigation Vertical navigation appears on the side of a page or dialog, and allows users to navigate through a set of screens or related set of pages. Vertical navigation is the best choice when navigating within a modal dialog. Use tabs instead if you're just switching views of the same context.

Application header

Every server application in the Atlassian suite has a customized version of a branded header. This shows the user that the applications are connected, and means users don't have to relearn using the header for each application.

Application header example
Application switcher:
This opens a menu with links to connected Atlassian applications.
Logo and application name:
These identify which application the user is viewing.
Top level navigation items:
Each application has a set of buttons or dropdown buttons to help the user navigate. These buttons, dropdown buttons and other controls have unique styling when they appear in the application header area, and this styling should not be used anywhere else.
Optional: "Create" button:
This can take on three forms (with unique designs for use in application header only):
  1. Simple button: creates a specific entity in the application, without any further choices.
  2. Simple button, followed by modal dialog: opens a modal dialog that displays further choices for new entity.
  3. Split button: shows the most common 'Create' option immediately, but reveals more options if users click on the dropdown part of the control.
Search field:
Used to search the application.
Help:
Contains links to all of the user assistance and help options available in the application.
Admin:
If users have admin access within the application, more options are revealed for global configuration.
Optional: Notifications:
An inline dialog to display the latest notifications connected to the users' accounts
User profile:
A link to a user's profile, but this menu can also give access to other settings and tools.

When designing the controls to move through the information architecture, keep in mind:

  • Structure and sequence: Order the top level menu items by frequency of access from left to right, starting with the most frequently accessed. In dropdown menus, order the items by the most used to least used.
  • Menu content: Menus can display titles to indicate a group of related items, a separator to indicate group divisions (where it makes logical sense), 16px icons (but always with accompanying label), checkbox and radio button variations. Use sentence case for menu items, and use words that clearly communicate the intended outcome of a menu item.

Horizontal navigation

Use horizontal navigation to allow people to navigate between page contexts.

Horizontal navigation should only be used once per screen, at the top of the page under the page header. If you need another layer, use the horizontal navigation for the first level, and tabs for the second level.

Horizontal navigation example

Horizontal navigation includes:

Navigation items:
Navigation items are the label or short descriptive text that you click to go to a specific page. Do not use icons with this text.
Badges (optional):
Use the count badge with nav items to communicate the amount of content that you can access from the page (for example, the number of pull requests).
Navigation dropdowns (optional):
Use navigation dropdowns only on the right-most nav item, to hold infrequently-used items, for example settings.

Vertical navigation

Use vertical navigation to allow users to move between content across pages. You can add structure by grouping related sets of pages under a heading. Don't nested vertical navigation within another vertical navigation, and don't include drop-down menus in vertical navigation.

Vertical navigation is optimized to use the left hand side of pages and modal dialogs.

Vertical navigation example

Vertical navigation includes:

Navigation items:
Navigation items are the label or short descriptive text that you click to go to a specific page. Do not use icons with this text.
Group headings (optional)
Use headings to group pages together to make the navigation list easier to read quickly.
Badges (optional)
Use the count badge with nav items to communicate the amount of content that you can access from the page (for example, the number of pull requests).