Keen | Navs
Description: Bootstrap navs examples

# Customer Relationship Management

New Order

### Navs

Reports
Keen extends `Bootstrap Nav` component with a variety of options to provide uniquely looking Nav component that matches the Keen's design standards.
For more info please visit the plugin's Documentation.

### Basic Examples

### Modal components

The base `.nav` component does not include any `.active` state. The following examples include the class, mainly to demonstrate that this particular class does not trigger any special styling.
Navigation available in Bootstrap share general markup and styles, from the base `.nav` class to the active and disabled states. Swap modifier classes to switch between each style. The base `.nav` component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
Classes are used throughout, so your markup can be super flexible. Use `< ul >`s like above, or roll your own with say a `< nav >` element. Because the `.nav` uses `display: flex`, the nav links behave the same as nav items would, but without the extra markup.

### Horizontal alignment

### Center Alignment

Change the horizontal alignment of your nav with flexbox utilities. By default, navs are left-aligned, but you can easily change them to center or right aligned. Centered with `.justify-content-center`

### Right Alignment

Right aligned with `.justify-content-end`

### Tabs

Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

### Vertical

Stack your navigation by changing the flex item direction with the `.flex-column` utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., `.flex-sm-column`).
As always, vertical navigation is possible without `< ul >`s, too.

### Fill and justify

Force your `.nav`’s contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your `.nav-item`s, use `.nav-fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.
When using a `< nav >`-based navigation, be sure to include `.nav-item` on the anchors.
For equal-width elements, use `.nav-justified`. All horizontal space will be occupied by nav links, but unlike the `.nav-fill` above, every nav item will be the same width.
Similar to the `.nav-fill` example using a `< nav >`-based navigation, be sure to include `.nav-item` on the anchors.

### Pills

Take that same HTML, but use `.nav-pills` instead.

### Dropdowns

### Tabs with dropdowns

### Pills with dropdowns

### Quick Actions

Orders
Uploades
Products
Customers
Blog Posts
Settings
02:30 PM
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall
Yestardey
FlyMore design mock-ups been uploadet by designers Bob, Naomi, Richard
PSD, Sketch, AJ
Aug 13,2018
Meeting with Ken Digital Corp ot Unit14, 3 Edigor Buildings, George Street, Loondon
England, BA12FJ
Meeting, Customer
May 09, 2018
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall

### Recent Bills

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Orders

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Invoices

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### New Comments

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Recent Posts

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View
Notifications
Enable notifications:
Enable audit log:
Notify on new orders:
Orders
Enable order tracking:
Enable orders reports:
Allow order status auto update:
Customers
Enable customer singup:
Enable customers reporting:
Notifiy on new customer registration:

- Demos

### Select A Demo

Demo 1
Default RTL Version
Demo 2
Default RTL Version
Demo 3
Default RTL Version
Demo 4
Default RTL Version
Demo 5
Default RTL Version
Demo 6
Default RTL Version
Demo 7
Coming soon
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!