Navigation Bar Reference

Collaborate with us

Edit this page on GitHub

Layout and classes

Element	CSS Class	Description
.navigation-bar	.is--sticky	Defines if the navigationBar position is fixed or not
.navigation-bar-item	.is--active	Defines if the current navigationBarItem is active
.navigation-bar-item	.is--open	Defines if the current navigationBarItem is open
.navigation-bar-item	.is--closed	Defines if the current navigationBarItem is closed
.navigation-bar-item-content	.is--active	Defines if the current navigationBarSubItem is active
.navigation-bar-item-content	.is--open	Defines if the current navigationBarSubItem is open
.navigation-bar-item-content	.is--closed	Defines if the current navigationBarSubItem is closed
.navigation-bar-item-content	.is--expanded	Defines if the current navigationBarSubItem is expanded
.navigation-bar-item-content	.is--collapsed	Defines if the current navigationBarSubItem is collapsed

Drag the Navigation Bar into the preview.
In the Content placeholder, drag a ListRecords widget.
Set the Line Separator from ListRecords to None.
In the ListRecords widget, drag a NavigationBarItem.
In the NavigationBarItem, use expressions to display the required database content in the placeholders. Optionally, you can drag a NavigationBarSubItem to the Content Placeholder and set the expression there.
Publish and test.

Write the following CSS in the CSS editor and change the yourcolor and yourelement.

.navigation-bar-item.is--active yourelement {
    color: yourcolor;
}

.navigation-bar-item.is--active yourelement {
    color: var(--color-yourcolor);
}

Write the following CSS in the CSS editor and change the yourcolor and yourelement.

.navigation-bar-item-subitem.is--active yourelement {
    color: yourcolor;
}

.navigation-bar-item-subitem.is--active yourelement {
    color: var(--color-yourcolor);
}