When activated in Publish settings, navigation is placed in the left sidebar and can be styled with the following variables. Top-level items and folders can be treated differently than nested items.

CSS variables

Publish-specific variables should be defined on the .published-container.

Variable Description
--nav-collapse-icon-color Collapse icon color
--nav-collapse-icon-color-hover Collapse icon color (hovered)
--nav-parent-item-color Font color for folders and top-level items
--nav-parent-item-color-active Font color for active top-level items
--nav-parent-item-weight Font weight for top-level items
--nav-item-color Font color for nested items
--nav-item-color-hover Font color for hovered nested items
--nav-item-color-active Font color for active nested items
--nav-item-border-color Border color for nested items
--nav-item-border-color-hover Border color for hovered nested items
--nav-item-border-color-active Border color for active nested items
--nav-item-weight-active Font weight for active nested items
Site navigation
Interactive graph