Last updated 1 month ago

nav

Usage

To display a header (top navigation bar) in your portal, you must define the header contents in the nav section. Add it to the top level of the siteConfig.yaml file.

Items are displayed in the header in the same order as they are defined in the nav section. Every item must have a name (defined by label) and a link (either to a page in the portal project or to an external resource).

Related options

Customize the header appearance by modifying the developer portal theme.

Options

Option Description
external When set to true, opens header items in a new browser tab or window. This is an optional property that you can use with page and href links.
href Defines the link to an external resource (href: 'https://example.com/docs'). Enclose the links in single quotation marks.
icon Defines the path to a custom icon displayed next to the header item name (icon: developer-portal/images/home-icon.png). This is an optional property that you can use with page and href links.
label Sets the name for the header item (label: Start page).
page Defines the link to a page in the developer portal project (page: developer-portal/introduction.md).
permission When using RBAC in the developer portal, this optional property sets the permission for displaying the header item. User roles with the matching permission(s) will be able to see the item in the header when they log into the portal.
search When set to true, enables the search functionality in the portal and displays the search input field in the header. Placing the search key at the end of the nav section displays the search input field to the rightmost side of the header. Place it at the beginning of the nav section to display it on the left side of the header. If you remove the search key from the nav section or set it to false, the search functionality in the portal will be disabled.

Examples

meta:
  title: Example Developer Portal
  description: Learn how to work with Example APIs
nav:
  - label: Home
    page: developer-portal/home.md
  - label: Example with an icon
    page: developer-portal/example.md
    icon: images/page-icon.png
  - label: Example in a new tab
    page: developer-portal/test.md
    external: true
  - label: External link
    href: 'https://example.com/docs'
  - search: true