Navigation Bar Reference
Collaborate with us
Edit this page on GitHub
Layout and classes
CSS selectors
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 |
Advanced use case
Use Navigation Bar with ListRecords
-
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.
Change the active color on the NavigationBarItem
- Write the following CSS in the CSS editor and change the
yourcolor
andyourelement
.
.navigation-bar-item.is--active yourelement { color: yourcolor; }
- Or use CSS variables:
var(--color-yourcolor)
.
.navigation-bar-item.is--active yourelement { color: var(--color-yourcolor); }
Change the active color on the NavigationBarSubItem
- Write the following CSS in the CSS editor and change the
yourcolor
andyourelement
.
.navigation-bar-item-subitem.is--active yourelement { color: yourcolor; }
- Or use CSS variables:
var(--color-yourcolor)
.
.navigation-bar-item-subitem.is--active yourelement { color: var(--color-yourcolor); }