---
title: Sidebar
description: Configuring how folders and pages appear in the sidebar.
image: https://developers.cloudflare.com/cf-twitter-card.png
---

> Documentation Index  
> Fetch the complete documentation index at: https://developers.cloudflare.com/style-guide/llms.txt  
> Use this file to discover all available pages before exploring further. 

[Skip to content](#%5Ftop) 

# Sidebar

## Labels

Labels are controlled by frontmatter properties on a given page, which vary depending on if you are configuring a group or a link.

### Links

In order of precedence:

1. `sidebar.label`
2. `title`

#### On an index page

Index page labels default to `Overview` if `sidebar.label` is not defined.

`title` is not taken into consideration due to `title` being used in group labelling.

### Groups

In order of precedence:

1. `sidebar.group.label`
2. `title`

### Example

For example, given the following pages:

/src/content/docs/foo/bar/index.mdx

```
---title: Barsidebar:  label: IndexTitle  group:    label: GroupTitle---
```

/src/content/docs/foo/bar/baz.mdx

```
---title: Bazsidebar:  label: PageTitle---
```

The sidebar structure will look like:

* DirectoryGroupTitle  
  * IndexTitle
  * PageTitle

If we remove the `sidebar` property from both, it will now look like this:

* DirectoryBar  
  * Overview
  * Baz

## Ordering

Both links and groups use the `sidebar.order` frontmatter property to configure their ordering, where groups are ordered based on the index page's order.

If `sidebar.order` is not specified, it will fallback to alphabetical ordering.

For example, given the following pages:

/src/content/docs/foo/alpha/index.mdx

```
---title: Alphasidebar:  order: 3---
```

/src/content/docs/foo/beta/index.mdx

```
---title: Betasidebar:  order: 2---
```

The sidebar structure will look like:

* DirectoryBeta  
  * ...
* DirectoryAlpha  
  * ...

If we remove the `sidebar` property from both, it will now look like this:

* DirectoryAlpha  
  * ...
* DirectoryBeta  
  * ...

## Hiding pages

There are three properties that can be used for hiding pages from the sidebar.

### Hiding individual pages

#### `hidden`

This property should only be used when the page is **not** an index page for a group.

```
---title: Placeholdersidebar:  hidden: true---
```

#### `group.hideIndex`

Since index pages are relied on to configure the label and sort order of groups, we have a special property that still makes the page available to our sidebar component and allows us to remove it after labelling and ordering groups.

```
---title: Placeholdersidebar:  group:    hideIndex: true---
import { DirectoryListing } from "~/components";
<DirectoryListing />
```

Note

Since these pages are still accessible via other links and directly navigating to the URL, always include a `DirectoryListing` component within the page content.

### Hiding child pages of a group

To make a group render as if it was a single page, which links to the index page, use the top-level `hideChildren` property.

## Badges

### Links

To specify a badge next to the link, use the `sidebar.badge` property.

/src/content/docs/examples/example.mdx

```
---title: Examplesidebar:  badge: New!---
```

* DirectoryExamples  
  * Example \[New!\]

### Groups

To specify a badge next to the group label, use the `sidebar.group.badge` inside the group's `index.mdx` frontmatter.

/src/content/docs/examples/index.mdx

```
---title: Examplessidebar:  group:    badge: New!---
```

* DirectoryExamples \[New!\]  
  * Example

### Automatic "Beta" badges

A "Beta" badge is automatically added to sidebar links and groups whose URL matches a directory entry with a "Beta" availability status. This badge is **not** controlled by frontmatter — it is derived from the product availability data associated with the entry in `src/content/directory/`.

```json
{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/style-guide/frontmatter/sidebar/#page","headline":"Sidebar · Cloudflare Style Guide","description":"Configuring how folders and pages appear in the sidebar.","url":"https://developers.cloudflare.com/style-guide/frontmatter/sidebar/","inLanguage":"en","image":"https://developers.cloudflare.com/cf-twitter-card.png","dateModified":"2026-04-24","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/style-guide/","name":"Style Guide"}},{"@type":"ListItem","position":3,"item":{"@id":"/style-guide/frontmatter/","name":"Frontmatter"}},{"@type":"ListItem","position":4,"item":{"@id":"/style-guide/frontmatter/sidebar/","name":"Sidebar"}}]}
```