### Disabled Link

### $5,668

Sales

#### Description

The disabled navigation option allow you to disable certain level navigation link.

Experience it!

This page contain navigation menu with disabled navigation item ( Disabled Menu ) options example, check at the left hand side of the page.

#### CSS Classes

This table contains class to disable navigation menu link.

All these options can be set via following classes:

Classes | Description
--- | ---
`.disabled` | To disabled vertical navigation menu link, you need to add `.disabled` class in navigation `<li>` tag. Refer HTML markup line no 12.

#### HTML Markup

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

- Line no 26 & 22: Contain the `.disabled` class, Line 16 shows to disabled parent menu item and Line 22 shows disabled child menu item.

                          <!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 class="main-menu-header">
                                      <div data-mcs-theme="minimal-dark" class="main-menu-content ps-container ps-theme-light ps-active-y">
                                        <ul id="main-menu-navigation" data-menu="menu-navigation" class="navigation navigation-main">
                                          <li class="nav-item disabled"><a href="index.html"><i class="fa fa-home"></i><span class="menu-title">Dashboard <span class="badge badge-default badge-info float-right">1.2.2</span><span class="badge badge-default badge-info float-right"></span></span></a>
                                          </li>
                                          <li class="nav-item has-sub open"><a href="#"><i class="fa fa-tv"></i><span class="menu-title">Layouts<span class="badge badge-default badge-info float-right"></span></span></a>
                                            <ul class="menu-content">
                                              <li class="is-shown"><a href="#">Layout 1</a>
                                              </li>
                                              <li class="is-shown disabled"><a href="#">Layout 2 <span class="badge badge-default badge-info float-right">New</span></a>
                                              </li>
                                              <li class="is-shown"><a href="#">Layout 3</a>
                                              </li>
                                              <li class="is-shown"><a href="#">Layout 4</a>
                                              </li>
                                              <li class="disabled is-shown"><a href="#">Layout 5<span class="tag menu-sub-title">Coming soon</span></a>
                                              </li>
                                            </ul>
                                          </li>
                                        </ul>
                                      </div>
                                    </div>
                                </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>