Website design

Navigation

Create menu links, bind a menu to the website, and keep destinations working as content changes.

GroCMS 0.1.0 · Reviewed 15 September 2026

Download this guide

The menu and the navigation component

Navigation contains menu resources: ordered lists of link labels and destinations. The Site navigation component displays one of those menus together with the site's brand name or logo. Editing the menu changes its data; placing or binding Site navigation determines where that data appears. Creating a new menu does not automatically replace every navigation area.

The public header uses a default Site navigation component unless a designated shared header supplies another layout. A Site navigation component may bind a particular published menu. With no menu selected, it uses the site's default resolved menu; if no menu exists, the public renderer can fall back to links for public content archives.

Sources: Resource editor and design resource fields; Configured website components; Public page selection and resource resolution.

Choose a resource link or a typed address

DestinationRecommended entry
A specific Page or postChoose Linked content so the menu resolves its current public route.
The homepageEnter / in Link when the destination is the front page itself.
The post archiveEnter the configured archive path, for example /journal. The exact path depends on your content configuration.
SearchEnter /search.
An external websiteEnter its complete safe URL, such as https://example.com.

A resource link follows the target's current non-redirect public route. A typed path remains the text you entered and may need maintenance after a route change. If a resource has no public route, its bound link is omitted from the public menu. Selecting a draft or later withdrawing its destination does not make that destination publicly available through navigation.

Use labels that explain the destination without relying on nearby decoration. The validator rejects unsafe links, but it does not prove that a typed external page exists or that an archive path is spelled correctly. Open each important destination during your review.

Sources: Public page selection and resource resolution; Resource editor and design resource fields; Content and composition validation; Revision and publication service.

Use a particular menu in a layout

  1. Publish the menu so it is available to the navigation picker.
  2. Open the relevant shared header or composition in Visual editor and select Site navigation.
  3. In its Navigation field, choose the published menu. Save and publish the receiving resource after checking Preview.
  4. For subsequent label or ordering changes, publish the menu itself. The bound component will resolve its current published version.

A bound menu is a required dependency of its receiving composition. Publish it first. The site default is not controlled by a visible active-menu switch: the resolver selects a published default resource using a stable stored order. Where multiple menus exist, bind the intended one explicitly instead of assuming the newest menu wins. The global header role itself is documented under Shared sections.

Sources: Puck integration and editor configuration; Configured website components; Public page selection and resource resolution; Revision and publication service.

Branding and mobile layout

Site navigation reads the published brand's Logo display choice: the official GroCMS logo, a custom image, or the site name as plain text. The shared Site logo component uses the same choice in footer and body layouts. Change identity in Brand & theme rather than adding a logo row to the menu. Authored text elsewhere remains ordinary content and is not automatically rewritten.

Navigation links wrap responsively on small screens. This website component does not provide a visitor-facing hamburger-menu editor. Preview phone widths after adding labels, especially long organization names or translated text. The content order in the menu remains the reading order when links wrap.

Sources: Configured website components; Public website frame and theme application; Website component styles; Brand foundations form.

Permissions and common fixes

Administrators and designers manage Navigation resources. Editors, authors, and contributors do not manage menus under the current design-resource policy. A saved draft is not the public menu until it is published. Revision history can restore an earlier menu as a working draft; inspect and publish it to reverse a live change.

  • Wrong menu visible: inspect the Site navigation binding rather than repeatedly publishing a different menu.
  • A single link is missing: check whether its linked entry has an available public route and has been published.
  • A typed link is wrong: correct the Link field and publish the menu; changing a Page title will not rewrite literal URLs.
  • Two menus appear: check whether navigation exists both in the global header and in the Page's main composition.

Sources: Role and resource permissions; Resource editor and design resource fields; Public page selection and resource resolution; Editor browser verification.