# Source: https://www.mintlify.com/docs/organize/navigation.md

# Source: https://www.mintlify.com/docs/guides/navigation.md

# Source: https://www.mintlify.com/docs/editor/navigation.md

> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Organize navigation

> Organize your documentation structure with the visual navigation editor.

Use the navigation sidebar to organize your documentation. Changes you make in the web editor's navigation tree appear in your site's navigation sidebar and sync to your `docs.json` configuration file.

## Add navigation elements

To add a new navigation element, click **Add new** at the bottom of the navigation tree.

<Frame>
  <img src="https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=2562e8efb53c7b39ce60729bed6bd465" alt="Add new navigation element." className="block dark:hidden" data-og-width="552" width="552" data-og-height="614" height="614" data-path="images/editor/navigation-light.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?w=280&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=3baaafbe8fb422fc2dd2f4aaa668e769 280w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?w=560&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=8d27542dff9285e70626e852b0814457 560w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?w=840&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=d18adddf4bf7850d37f6a76433c69a74 840w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?w=1100&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=9d6d6339c1393b3d7df027a0de87ec10 1100w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?w=1650&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=760017ec200b545de32e9767decb0272 1650w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-light.png?w=2500&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=30d3e7cf86718374551219677e807caf 2500w" />

  <img src="https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=713cfecdc840df31c0faac94b7e6f0d6" alt="Add new navigation element." className="hidden dark:block" data-og-width="552" width="552" data-og-height="616" height="616" data-path="images/editor/navigation-dark.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?w=280&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=9f6137d81b652110d6634a518c444d4c 280w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?w=560&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=ae334227d2ad437b7c8715822b5908bd 560w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?w=840&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=71b7fb2da444b10efcfbc29bb1d4a563 840w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?w=1100&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=e82c5dd40e901b3a99d63b28f8ccfbd6 1100w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?w=1650&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=696704bf183c85a09f4788366e28703a 1650w, https://mintcdn.com/mintlify/DLSr2FhOurD6ae47/images/editor/navigation-dark.png?w=2500&fit=max&auto=format&n=DLSr2FhOurD6ae47&q=85&s=2ebd571fc205105f7bbf41cd56ec9b54 2500w" />
</Frame>

To add a navigation element nested inside another element, click the **+** button next to the name of the parent element.

After creating an element, drag and drop it to reorder or nest it within other elements. Right-click any element to configure its properties, duplicate it, hide it from navigation, or delete it.

<Note>
  Some elements cannot nest inside other elements. For example, tabs cannot nest inside groups. The web editor prevents you from nesting invalid elements.
</Note>

### Add existing files

Add files from your repository that aren't yet in navigation.

1. Click the plus button, <Icon icon="plus" />, where you want to add the file.
2. Click **Add existing file**.

<Frame>
  <img src="https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=9312867a92d47d8cc157b63af791d7f0" alt="Add existing file menu expanded." className="block dark:hidden" data-og-width="1084" width="1084" data-og-height="860" height="860" data-path="images/editor/add-existing-file-menu-light.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?w=280&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=ac853fa4c1661b3a7c4d1e5b658b0560 280w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?w=560&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=c40ac6cc057966457a38b09601ab259a 560w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?w=840&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=23e42a36d92db6fce4af9f77c65d418d 840w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?w=1100&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=ee36563e4d22fd4532507dd3ed4c6105 1100w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?w=1650&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=05c6933e736d53f5a19679c6b131dfaf 1650w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-light.png?w=2500&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=bf9baffb98ef79a82fd40c281a05ee20 2500w" />

  <img src="https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=ff766655773ec13b2badf8e4935d8d70" alt="Add existing file menu expandeda." className="hidden dark:block" data-og-width="1084" width="1084" data-og-height="860" height="860" data-path="images/editor/add-existing-file-menu-dark.png" data-optimize="true" data-opv="3" srcset="https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?w=280&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=b8587fa63f4ebb6e78c23f6a61d79635 280w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?w=560&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=50ddc4bdd5f2568249eef80e79e57ae9 560w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?w=840&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=60073de41dffe2dbd1ed01cd498672bb 840w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?w=1100&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=017d99c7557930f9c0af476d9479a355 1100w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?w=1650&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=791d6834dbdb2908ea114f0ae50a5276 1650w, https://mintcdn.com/mintlify/-qEr0KdFgYiJikkw/images/editor/add-existing-file-menu-dark.png?w=2500&fit=max&auto=format&n=-qEr0KdFgYiJikkw&q=85&s=c8c5e9ee2d078a5f93a24fe9c2721d65 2500w" />
</Frame>

You can also drag files from the **Unused pages** section directly into your navigation tree.

## Organize into sections

Choose the right navigation structure for your documentation's scope and audience.

### When to use pages

Use pages for individual documentation files. Pages are the core building blocks of your navigation—every piece of content lives on a page. Add pages to your navigation to make them visible in your site's sidebar.

Pages can exist at the root level, within groups, tabs, anchors, dropdowns, or menus.

If files are not in another navigation element, they appear in the **Unused pages** section. Unused pages are [hidden](/organize/hidden-pages) from your published documentation.

### When to use groups

Use groups to organize related pages into collapsible sections. Groups help users scan your navigation by clustering similar content together, like grouping all authentication-related pages or all API endpoint references.

Groups can nest within other groups to create a hierarchical organization. Groups can exist within tabs, anchors, dropdowns, or at the root level.

### When to use tabs

Use tabs to create separate top-level sections with horizontal navigation at the top of your site. Tabs work well when you have distinct areas like API Reference, Guides, and SDKs that users need to switch between.

Tabs can contain pages, groups, and menu items. Configure tabs to add icons or link to external resources.

### When to use anchors

Use anchors to create persistent navigation items at the top of your sidebar. Anchors help when you want to section your content or provide quick access to external resources without switching tabs.

Anchors can contain pages and groups, or link to external URLs.

**Global anchors:**

Create global anchors that appear on all pages regardless of which section users are viewing. Global anchors must link to external URLs and are useful for resources like blogs, status pages, or support links.

### When to use dropdowns

Use dropdowns to create an expandable menu at the top of your sidebar. Dropdowns work well when you have multiple related sections that users might want to explore but don't need constant visibility like tabs.

Dropdowns can contain pages and groups, or link to external URLs.

### When to use menus

Use menus to add dropdown navigation items within a tab. Menus help users navigate directly to specific pages from the top navigation bar.

Menus can contain pages and groups.

### When to use products

Use products when you have multiple distinct product offerings that each need their own documentation. Products create a switcher menu that lets users navigate between different product documentation sets.

Each product can have its own navigation structure with tabs, pages, and groups.

### When to use versions

Use versions when you maintain multiple versions of your documentation simultaneously, like v1.0, v2.0, and v3.0 of an API. Versions create a switcher menu that lets users select which version they want to view.

Each version can have different content and navigation structure.

### When to use languages

Use languages when you provide documentation in multiple languages. Languages create a switcher menu that lets users view documentation in their preferred language.

Each language maintains the same navigation structure with translated content.

## Customize appearance

**Add icons:**

1. Right-click a navigation item.
2. Click **Configure**.
3. Click the icon field.

**Add tags:**

1. Right-click a navigation item.
2. Click **Configure**.
3. Click the tag field.
4. Enter a tag like "NEW" or "BETA" that highlights important items.

**Control visibility:**

Hide the content within a navigation element without deleting it from your repository.

1. Right-click any item.
2. Click the toggle by the **Hide** label.