Navigation

 

Navigation (jds-nav)

Navigational patterns help users move between pages and situate themselves in an application.

We can declare list's as Navigation by adding CSS class jds-nav


Navigation Horizontal

Nav / Horizontal

 

Nav / Horizontal / Icon Only

 
Code View
 
 

Nav Center

We can move nav item's center, left and right by using nav-justify-center, nav-justify-left, nav-justify-right class with jds-nav

 
 
 

Navigation Horizontal

Nav / Horizontal / Text Only

 
Code View
 

Navigation Sizes

Nav / Horizontal / Size xxl

 

Nav / Horizontal / Size xl

 

Nav / Horizontal / Size l

 

Nav / Horizontal / Size m

 

Nav / Horizontal / Size s

 

Nav / Horizontal / Size xs

 

Nav / Horizontal / Size xs

 
 

Nav / navbar-responsive / Right Aligned

JDS 1st
 

Nav / Navbar Responsive / Dropdown / Right Aligned +

JDS 2nd
 

Nav / Navbar Responsive / Dropdown / Space Between

JDS 3rd
 

nav-links / verticale

JDS
JDS
JDS
 

Pagination

You need to use class jds-pagination to initiate pagination. You can apply colors theme, like:- pagination-primary, pagination-success, pagination-warning, pagination-error, pagination-info, pagination-tertiary, pagination-gray, pagination-foreground, and pagination-background also you can apply Rounded edge in each nav item by admin css class pagination-rounded

Some times you need to add extra space between nav items just use class flex-gap1, flex-gap5, flex-gap10, flex-gap15, flex-gap20, flex-gap25 in root dom.

nav / pagination

 

nav / pagination / primary color

 

nav / pagination / warning color

 

nav / pagination / success color

 

nav / pagination / error color

 

nav / pagination / info color

 

nav / pagination / tertiary color

 

nav / pagination / gray color

 

nav / pagination / foreground color

 

nav / pagination / background color

 

nav / pagination / rounded

 
 
 
 
 
 

You can get some Navbar / header here

Navbar / header