The navs component includes a list of links that users use to move between sections of the application. They are often used in the app bar of your application or in your sidebar.
Introduction
The base nav
component is built on top of stack
component to provide a strong foundation for building all types of navigation components.
Shape
Change the style of .nv-nav
component with modifiers and utilities classes to switch between each style available in Nova.
Default
This is the default shapes of the nav links. Links got small border-radiuses.
Square
Use the .nav-square
modifier class to make navigation links squared.
Pill
Use the .nav-square
modifier class to make navigation links squared.
Level
Level is used to select what kind of navigation you want.
Vertical
You can easily stack vertically your navigation links by changing the flex items direction. All you need to do is to add the nav-vertical
modifier class and change the horizontal gap gutter-x-{size}
with gutter-y-{size}
.
Colors
The navigation is available in all the different colors defined by the official brand guideline for Nova's colors. They are 5 main UI colors: primary, secondary, warning, error and success.