Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keen extends Bootstrap Navs component with a variety of options to provide unique looking Tab components that matches Keen's design standards.
For more info on the original Bootstrap utilities please visit the official Bootstrap Navs Documentation.

Base Examples

Navigation components in Bootstrap share some general markup and styles, from the base .nav class to the active and disabled states.


                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">Active</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                    Dropdown
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                             </li>
                            <li class="nav-item">
                                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                            </li>
                        </ul>

Font Weight Options

Use .nav-bold, .nav-bolder and .nav-boldest to set font weight to nav links.


                        <ul class="nav nav-bold">
                            ...
                        </ul>
                        <ul class="nav nav-bolder">
                            ...
                        </ul>
                        <ul class="nav nav-boldest">
                            ...
                        </ul>
                        

Alignments

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


                        <ul class="nav justify-content-center">
                            ...
                        </ul>

Right-aligned with .justify-content-end:


                        <ul class="nav justify-content-end">
                            ...
                        </ul>

Stack your navigation by changing the flex item direction with the .flex-column utility.


                        <ul class="nav flex-column">
                            ...
                        </ul>

Tabs

Add the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with the Tab JavaScript plugin.


                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            ...
                        </ul>
                        <div class="tab-content mt-5" id="myTabContent">
                            ...
                        </div>

Pills

Add .nav-pills within .nav-tabs to create pill shape navs.


                        <ul class="nav nav-pills" id="myTab" role="tablist">
                            ...
                        </ul>
                        <div class="tab-content mt-5" id="myTabContent">
                            ...
                        </div>

Use the standard bootstrap state color classes nav-{color} to change the active pill color.


                        <ul class="nav nav-success nav-pills" id="myTab" role="tablist">
                            ...
                        </ul>
                        <div class="tab-content mt-5" id="myTabContent">
                            ...
                        </div>

Use the standard bootstrap state color classes nav-light-{color} to set the light pill color style.


                        <ul class="nav nav-light-success nav-pills" id="myTab" role="tablist">
                            ...
                        </ul>
                        <div class="tab-content mt-5" id="myTabContent">
                            ...
                        </div>

Use nav-fill class to fill and justify.


                        <ul class="nav nav-pills nav-fill">
                            ...
                        </ul>

Add Bootstrap's .flex-column class for vertical navs.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Id id reprehenderit sit est eu aliquad. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur.
Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur.

                        <div class="row">
                            <div class="col-4">
                                <ul class="nav flex-column nav-pills">
                                    ...
                                </ul>
                            </div>
                            <div class="col-8">
                                <div class="tab-content" id="myTabContent">
                                    ...
                                </div>
                            </div>
                        </div>

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9