Navs

Based on Bootstrap Navs.

Base nav



<abp-nav nav-style="Pill" align="Center">
    <abp-nav-item>
<a abp-nav-link active="true" href="#">Active</a>
    </abp-nav-item>
    <abp-nav-item>
<a abp-nav-link href="#">Longer nav link</a>
    </abp-nav-item>
    <abp-nav-item>
<a abp-nav-link href="#">link</a>
    </abp-nav-item>
    <abp-nav-item>
<a abp-nav-link disabled="true" href="#">disabled</a>
    </abp-nav-item>
</abp-nav>


<ul class="nav justify-content-center nav-pills">
   <li class="nav-item">
       <a href="#" class="nav-link active">Active</a>
   </li>
   <li class="nav-item">
       <a href="#" class="nav-link">Longer nav link</a>
   </li>
   <li class="nav-item">
       <a href="#" class="nav-link">link</a>
   </li>
   <li class="nav-item">
       <a href="#" class="nav-link disabled">disabled</a>
   </li>
</ul>
  • For vertical nav, set nav-style "PillVertical".

Base nav



<abp-nav-bar size="Lg" navbar-style="Dark_Warning">
    <a abp-navbar-brand href="#">Navbar</a>
    <abp-navbar-toggle>
        <abp-navbar-nav>
            <abp-nav-item active="true">
                <a abp-nav-link href="#">Home <span class="visually-hidden">(current)</span></a>
            </abp-nav-item>
            <abp-nav-item>
                <a abp-nav-link href="#">Link</a>
            </abp-nav-item>
            <abp-nav-item dropdown="true">
                <abp-dropdown>
                    <abp-dropdown-button nav-link="true" text="Dropdown" />
                    <abp-dropdown-menu>
                        <abp-dropdown-header>Dropdown header</abp-dropdown-header>
                        <abp-dropdown-item href="#" active="true">Action</abp-dropdown-item>
                        <abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item>
                        <abp-dropdown-item href="#">Something else here</abp-dropdown-item>
                        <abp-dropdown-divider />
                        <abp-dropdown-item href="#">Separated link</abp-dropdown-item>
                    </abp-dropdown-menu>
                </abp-dropdown>
            </abp-nav-item>
            <abp-nav-item>
                <a abp-nav-link disabled="true" href="#">Disabled</a>
            </abp-nav-item>
        </abp-navbar-nav>            
        <span abp-navbar-text>
          Sample Text
        </span>
    </abp-navbar-toggle>
</abp-nav-bar>


<nav class="navbar navbar-expand-lg navbar-dark bg-warning">
    <a href="#" class="navbar-brand">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#13da550319ec478099dd4c9c3efb3d09" aria-controls="13da550319ec478099dd4c9c3efb3d09" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button><div class="collapse navbar-collapse" id="13da550319ec478099dd4c9c3efb3d09">
        <ul class="navbar-nav">
            <li active="true" class="nav-item">
                <a href="#" class="nav-link">Home <span class="visually-hidden">(current)</span></a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">Link</a>
            </li>
            <li class="nav-item dropdown">
                <div class="btn-group">
                    <a class="dropdown-toggle btn nav-link" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-busy-text="Processing..." roles="button" href="#"><span>Dropdown</span></a>
                    <div></div>
                    <div class="dropdown-menu">
                        <h6 class="dropdown-header">Dropdown header</h6>
                        <a href="#" class="dropdown-item active">Action</a>
                        <a href="#" class="dropdown-item disabled">Another disabled action</a>
                        <a href="#" class="dropdown-item">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a href="#" class="dropdown-item">Separated link</a>
                    </div>
                </div>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link disabled">Disabled</a>
            </li>
            <span class="navbar-text">
                 Sample Text
            </span>
        </ul>
    </div>
</nav>