FreshUI FreshUI

Navigation - Extras
Manipulate the sidebars with ease and use various elements to enrich your UX!

Swipe Enabled Area (doesn't work on a pinned sidebar!)

You can swipe Left/Right or click and drag Left/Right over the following area to open and close the sidebars! Just by adding a class: .sidebars-swipe

Handle Left Sidebar (doesn't work if pinned!)

Close Open Toggle

Handle Right Sidebar (doesn't work if pinned!)

Toggle Open Close

List Group

3

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

12

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

7

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

5

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

14

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

25

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

1

Element's Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Navigation Elements

Tabs .nav .nav-tabs

Pills .nav .nav-pills

Stacked Pills .nav .nav-pills .nav-stacked

Default Working Tabs Simple to use and easy to customize

Home..
Profile..
Messages..
Settings..
Options
Working block tabs..
Profile..
Settings..

Pager A <ul> with .pager class. You can use only icons, only text or both!

Pagination A <ul> with .pagination class

Default Pagination

Active and Disabled States

Sizes and Icons .pagination .pagination-lg .pagination .pagination .pagination-sm

Alignments The same as aligning a paragraph (using .text-center or .text-right on pagination's container)

Breadcrumb A <ol> list with .breadcrumb class

  1. Home
  2. Profile
  3. Settings

Tooltips, Popovers and Modals

Tooltips

Tooltip
Tooltip Top
Tooltip Right
Tooltip Bottom
Tooltip Left

Popovers

Modals

Modal Modal (fade in) Modal with Tabs