### Navigation Dark

#### Description

Dark color horizontal navigation with custom dark color options. In this page you can experience it. If you want to create a dark color horizontal navigation use the following customization options.

Experience it!

This page has dark horizontal navbar & examples below, You can also check horizontal layout templates dark navigation example to experience it live. horizontal-nav-dark.html

#### Examples

Classic white

##### Custom dark colors

Dark amber

Teal without shadow

Dark red

#### CSS Classes

This table contains all classes which can be used in dark horizontal navigation. You can combine them as per horizontal navigation dark template requirements.

All these options can be set via following classes:

Classes | Description
--- | ---
`.navbar-dark` | To set horizontal navigation dark color you need to add `.navbar-dark` class in horizontal navigation `<div>` tag. Refer HTML markup line no 13.
`.bg-[color]` | To set the dark horizontal navigation background color use `.bg-[color]` class where `[color]` is the value of your selected color from robust color palette. So for teal color background class will be `.bg-teal`. Refer HTML markup line no 2. Background color class is a optional if you don't it will take white background default.
`.bg-darken-[*]` | To set the selected background color darken use `.bg-darken-[*]` class where `[*]` is the value between '1-5' of your selected darken color from robust color palette. So for color darken 4 background class will be `.bg-darken-4`. Refer HTML markup line no 2. Background darken color class is a optional if you don't it will take white background default. `.bg-darken-[*]` class will work only if you have used `.bg-[color]`.
`.border-[color]` | To set the dark horizontal navigation border color use `.border-[color]` class where `[color]` is the value of your selected color from robust color palette. So for teal color border class will be `.bg-teal`. Refer HTML markup line no 2. Border color class is a optional.
`.border-darken-[color]` | To set the selected border color darken use `.border-darken-[*]` class where `[*]` is the value between '1-5' of your selected darken color from robust color palette. So for color darken 4 border class will be `.border-darken-4`. Refer HTML markup line no 2. Border darken color class is a optional. `.border-darken-[*]` class will work only if you have used `.border-[color]`.

#### HTML Markup

This section contains HTML Markup to create dark horizontal navigation. This markup define where to add css classes to make horizontal navigation dark.

- Line no 13: Contain the `.navbar-dark` class for adjusting horizontal navigation color dark. It has also `.bg-teal` & `bg-darken-5` to set darken background color and `border-teal` & `border-darken-4` to set darken border.

                  <!DOCTYPE html>
                  <html lang="en">
                    <head></head>
                    <body data-menu="vertical-menu" class="vertical-layout vertical-menu 2-column menu-expanded">

                      <!-- START Navbar-->
                      <nav role="navigation" class="header-navbar navbar-expand-sm navbar navbar-with-menu fixed-bottom navbar-dark navbar-shadow navbar-border">
                          ...
                      </nav>
                      <!-- END Navbar-->

                      <!-- START Horizontal navigation -->
                      <div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-dark navbar-shadow border-grey border-darken-2">
                          ...
                      </div>
                      <!-- END Horizontal navigation-->

                      <!-- BEGIN Content-->
                      <div class="content app-content">
                          <div class="content-wrapper">
                              <!-- content header-->
                              <div class="content-header row">
                                  ...
                              </div>
                              <!-- content header-->

                              <!-- content right-->
                              <div class="content-right">
                                  ...
                              </div>
                              <!-- content right-->

                          </div>
                      </div>
                      <!-- END Content-->

                      <!-- START FOOTER DARK-->
                      <footer class="footer footer-dark">
                          ...
                      </footer>
                      <!-- START FOOTER DARK-->

                    </body>
                  </html>