Examples
Click on any example to preview it and copy the YAML configuration.
Basic Example
A simple navigation bar with the most common routes and options, and one useful popup menu
Display route only for a given user
Navigation bar with a "settings" route only displayed for the user "jose"
Manually control when a route is selected
Navigation bar with a route with no `url` property, so we'll manually choose when it should be selected
Custom Selected Color
Navigation bar with a custom different selected color for each route
Badge with number of lights on
Navigation bar with a badge showing the number of lights that are currently on
Custom Primary Color
Navigation bar with a custom red primary color
Custom Background Color
Navigation bar with a black background
Desktop specific styles
Navigation bar with no rounded corners only in desktop mode
Route with rounded user's image
Navigation bar with a "more" route with the current user's image rounded
iOS glass effect
Navigation bar with a iOS glassmorphism style
Neumorphic style
Navigation bar with a neumorphic style
Media player displayed only on desktop
Navigation bar with a media player displayed only on desktop, placed at the bottom right
Control when the media player is displayed
Display media player only when it is playing or it's been paused for less than 5 minutes using the "show" property