Tidal Starter Kit

Tidal Starter Kit

Navigation Menus

Tidal makes use of a number of navigation menus throughout the site, for various purposes.

The following navigation menus are available for customization:

  • Docs: The main documentation menu. This appears on the left of the page by default, and as an off-canvas menu on smaller screen sizes.

  • Main: The main menu appears in the top right of the page on larger breakpoints. On smaller screens, this menu will be rendered at the top of the off-canvas navigation menu. The number of items in this menu should be kept relatively small due to space constraints.

  • Footer: This menu is rendered in the bottom-right corner of the page, in the site's footer.

#Customizing the Main Navigation Menu

The main structure of the "Docs" navigation menu comes from the currently active version's structured collection. The relative hierarchy within this collection will be preserved when rendering the menu.

To render the current version's menu within the navigation pane, add a new menu item to the menu and toggle the "Insert Current Version Menu" to true:

#Menu Item Icons

An icon may be associated with any navigation menu item by selecting a value for the "Menu Icon" field when editing a menu item within the Statamic Control Panel.

#Menu Item Sections

Any collection entry or navigation can be marked as a "section" by toggling the "Is Section" field within the Statamic Control Panel.

When this field is toggled on, the entry or menu item will be rendered as a static menu item. If the menu item is a collection entry, navigating directly to the entry's URL will generate a 404 HTTP response if the item has no children.

If the section navigation item does have children, navigating directly to the page will redirect the user to the first child's URL.

If you'd like to learn more about how this redirection is done, you can explore the following files:

  • app/Tags/AutoRedirect.php: A custom tag implementation to locate the first child, and return a refresh tag
  • resources/views/partials/meta/_meta.antlers.html: The Antlers template where the custom {{ auto_redirect }} tag is used

Some absolutely amazing

The following amazing people help support this site and my open source projects ♥️
If you're interesting in supporting my work and want to show up on this list, check out my GitHub Sponsors Profile.