### Native Scroll

#### Description

Modern admin's navigation use default perfect scrollbar, however it provides option to use default browser scroll bar. Check navigation with default scrollbar in navigation menu.

##### Advantages

- Most of all latest mobile operating systems and some mobile browsers automatically hide address-bar or tab-bar components when the user scrolls through the page. Using native scrolling enables this behavior.
- Native scrolling performs more smoother and faster as compared to the JavaScript or overflow: auto scrolling emulations.

Experience it!

This page contain native scrollbar navigation menu options example, check at the left hand side of the page.

#### CSS Classes

This table contains all classes related to the vertical navigation with default scrollbar option.

All these options can be set via following classes:

Classes | Description
--- | ---
`.menu-native-scroll` | To create vertical navigation with native scroll, you need to add `.menu-native-scroll` class in navigation `<div>` tag. Refer HTML markup line no 12.

#### HTML Markup

This section contains HTML Markup to create vertical navigation with native scroll. It define where to add css classes to make vertical navigation with native scroll.

- Line no 12: Contain the `.menu-native-scroll` class to set vertical navigation with native scrollbar.

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

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

                                <!-- BEGIN Navigation-->
                                <div class="main-menu menu-dark menu-native-scroll menu-shadow">
                                    ...
                                </div>
                                <!-- END 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>

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now