# Navigate the project

The interface of a project has various elements you can use to navigate the project's contents.
Some of these elements might have been customized or disabled in your project.

## Skip to content

You can jump directly to the main content of a project's page, skipping navigation elements and auxiliary information.

To skip to the page's main content:

1. After navigating to a page, press the Tab key.
2. Press the Return or Enter key, or click the **Skip to content** button.


The page content scrolls so that the first heading is at the top of the page.

Screenshot of the Skip to content button
## Use the table of contents

The table of contents (TOC) is displayed on the right side of the page and indicates your current position.
You can click any item on the TOC to jump to that heading.

Screenshot of a project with the table of contents on the right
## Navigate project pages

Projects have multiple elements you can use to navigate its content.
Depending on your device type (or screen size), the location and look of these elements can differ.

### Navigation bar

The navigation bar (navbar) contains links to major parts of the project.

Desktop
On desktop devices, the navbar is located at the top of the screen.

Screenshot of a project page's navigation bar
Some navbar items may contain a drop-down list of links.
This list expands when you hover your mouse over a navbar item.

Screenshot of a project page's navigation bar with expanded list of pages
Some projects may have [multiple products](#switch-between-products) that are displayed when you hover over the **Products** item.

Screenshot of a project page's navigation bar with expanded list of products
Mobile
To access the navbar on mobile devices:

- Select the **Menu** icon in the top-right corner of the screen and then select **Main menu**.


The contents of the menu change to represent the structure in the navbar.

Navbar items with nested links have a downward-facing arrow next to them.
To expand the list, select the arrow.
Projects with [multiple products](#switch-between-products) list them under the **Products** heading.

Screenshot of an open navigation bar on a mobile device
### Sidebar

The sidebar represents the structure and the hierarchy of pages in a project.
A project can have a single sidebar with links to all pages, or a main sidebar with additional sidebars for different sections of the project's content.

Desktop
On desktop devices, the sidebar is located on the left of the page.

Screenshot of a project page's sidebar
Mobile
To access the sidebar on mobile devices:

- In the top-right corner of the screen, select the **Menu** icon.


The contents of the menu represent the structure of the sidebar.

Screenshot of an open sidebar on a mobile device
### Breadcrumbs

Breadcrumbs are a series of links that are displayed above the main content of a page.
The links are available only on pages that have at least one level of nesting in the sidebar.
The order of breadcrumb links typically reflects the hierarchy in the sidebar: from the top-level page of the project to the currently displayed page.

Screenshot of a project page's breadcrumbs
### Navigation buttons

You can also use the navigation buttons located below the main content of the page.
These buttons typically open the next page or the previous page in the same order as the items in the sidebar.
Some projects may have a custom order for the navigation buttons to guide users through related content.

Screenshot of a project page's navigation buttons
## Switch between products

A project can have multiple products represented by distinct portions of content.
Products often have individual sidebars or other navigation elements, and their own visual style.

Desktop
On desktop devices, if a project has multiple products, the navbar includes a **Products** item that has a downward-facing arrow next to it.

To switch between products on desktop devices:

1. In the navbar, hover your mouse over **Products**.
2. Select an item from the drop-down list.


The selected product's content opens on its default page and the label of the **Products** navbar item changes to the name of the selected product.

Screenshot of a project page's navigation bar with expanded list of products
Mobile
To switch between products on mobile devices:

1. Select the **Menu** icon in the top-right corner of the screen and then select **Main menu**.
2. Under the **Products** heading, select a link.


The selected product's content opens on its default page.

Screenshot of an open navigation bar on a mobile device
## Switch between versions of a page

Pages that have multiple versions in a project display a version picker above the sidebar.
When you first access a page, the page's latest or default version is displayed.

Desktop
To switch between page versions on desktop devices:

- Above the sidebar, click the **Versions** dropdown and select a version from the drop-down list.


The page's content changes to reflect the selected version.

Screenshot of a sidebar with open version drop-down
Mobile
To switch between page versions on a mobile device:

1. Select the **Menu** icon in the top-right corner of the screen.
2. Under the **Version** heading, select a version from the drop-down list.


The page's content changes to reflect the selected version.

Screenshot of a sidebar with open version drop-down on a mobile device
## Resources

- [Adjust the project](/docs/end-user/adjust-project)
- [Search the project](/docs/end-user/use-search)
- Explore other ways you can interact with the [user interface](/docs/end-user)