### Right Side Icon

#### Description

Default horizontal layout has a left side navigation icons. This option allow you to set top level horizontal navigation menu item icon position to right side.

Experience it!

Check horizontal layout navigation with right side icons example below. horizontal-nav-right-side-icons.html

#### Examples

Horizontal navigation with right side icons to experience it live.

#### CSS Classes

This table contains class which can be used in horizontal navigation to hide dropdown arrow.

Classes | Description
--- | ---
`.navbar-icon-right` | To set horizontal navigation icon position to right, you need to add `.navbar-icon-right` class in horizontal navigation `<div>` tag. Refer HTML markup line no 12.

#### HTML Markup

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

- Line no 12: Contain the `.navbar-without-dd-arrow` class to hide navigation dropdown arrow.

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

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

                    <!-- START  Horizontal navigation -->
                    <div role="navigation" data-menu="menu-wrapper" class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-icon-right navbar-dark navbar-without-dd-arrow ">
                    ...
                    </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 body-->
                      <div class="content-body">
                      ...
                      </div>
                      <!-- content body-->

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

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

                  </body>
                </html>