Pages, groups and tabs

Add structure to your documentation site.

null

Add a new page

  1. Click + Add to add a new page or group.
  2. Choose New page from the menu.
  3. Name the page or group and hit the Enter key to complete.
  4. The new page will be added to the end of the navigation.

Add a new page within a group

  1. Next to the group name in the navigation, click to open the menu.
  2. Choose New pagefrom the menu.
  3. Name the page or group and hit the Enter key to complete.
  4. The new page or group will be added to the end of the group.

Edit a page

Page context menu
  1. Beside the page name in the navigation, click ••• to open the context menu.
  2. You have a number of options here: You can rename the page, duplicate the page, add a tab to the page, hide the page, and move it within the navigation. You can also delete the page.

Add a tab

  1. Beside the page name in the navigation, click ••• to open the context menu.
  2. Click + Add tab.
  3. In the New tab dialog, give the tab a name and click New tab.

Hide a page

Hide pages in the published site, including from search.

  1. Beside the pagegroup name in the navigation, click ••• to open the context menu.
  2. Click Hide page to hide it.
  3. You can unhide the page by following the same steps, but this time clicking Unhide page in the menu.

Reorder or move a page

As mentioned, you can move a page using the options from the page's context menu — follow the steps for Edit a page above.

You can also use drag and drop to reorder or move groups and pages in the top or side navigation. This includes moving items between the top and side navigation, and moving items into groups.

  1. Hover over the page or group and click and drag the ≡ icon.
  2. Drop it where you would like to move it:
  • On top of another item to move it into that item
  • Next to another item to reorder items

Edit the page header

null

You can customize the header of your page by adding a page description, a background image, and editing the text style. You can also add the page title and description directly in the header.

Add a page title and description

To add a title, simply click the placeholder text Untitled page and enter your own text instead.

To add a description, click Add description... just below the page title, and enter your page description.

Add a background image to your page header

null

You can add an image from the Page header side panel.

  1. Click the Add image button in the Background image row.
  2. You can either upload an image file, or choose a Figma frame from your connected files.
  3. You can remove the image by clicking on the button (in the same Background image row, beside the small preview of the current image).

Adjust header height

  1. You can adjust the height of the page header by hovering on it, clicking the blue bar that appears at the base of the header, and dragging up and down.
  2. You can also choose the header height in pixels by typing the value you want into the px field in the Header height row of the page header side panel.

Edit page header text style

You can also choose the color and alignment of the page header text in the side panel.

  1. To choose a new text color, input your desired color into the field in the Text color row. Alternatively, click the token reference icon to choose a color token from your design tokens to use for your text.
  2. You can choose the text alignment in the Text alignment row.

Delete a page

null
  1. In the context menu •••, click Delete page.
  2. In the dialog, click Delete page to delete.