Logo

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 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo


Deprecated: Return type of Adbar\Dot::offsetExists($key) should either be compatible with ArrayAccess::offsetExists(mixed $offset): bool, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 390

Deprecated: Return type of Adbar\Dot::offsetGet($key) should either be compatible with ArrayAccess::offsetGet(mixed $offset): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 401

Deprecated: Return type of Adbar\Dot::offsetSet($key, $value) should either be compatible with ArrayAccess::offsetSet(mixed $offset, mixed $value): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 412

Deprecated: Return type of Adbar\Dot::offsetUnset($key) should either be compatible with ArrayAccess::offsetUnset(mixed $offset): void, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 428

Deprecated: Return type of Adbar\Dot::count($key = null) should either be compatible with Countable::count(): int, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 445

Deprecated: Return type of Adbar\Dot::getIterator() should either be compatible with IteratorAggregate::getIterator(): Traversable, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 461

Deprecated: Return type of Adbar\Dot::jsonSerialize() should either be compatible with JsonSerializable::jsonSerialize(): mixed, or the #[\ReturnTypeWillChange] attribute should be used to temporarily suppress the notice in /var/www/preview.keenthemes.com/metronic/releases/2021-05-14-112058/theme/html/tools/preview/docs/lib/dot.php on line 477
Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30