Navs

Introduction

abp-nav is the basic tag helper component derived from bootstrap nav element.

Basic usage:

<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>

Demo

See the navs demo page to see it in action.

abp-nav Attributes

  • nav-style: The value indicates the positioning and style of the containing items. Should be one of the following values:
    • Default (default value)
    • Vertical
    • Pill
    • PillVertical
  • align: The value indicates the alignment of the containing items:
    • Default (default value)
    • Start
    • Center
    • End

abp-nav-bar Attributes

  • nav-style: The value indicates the color layout of the base navigation bar. Should be one of the following values:
    • Default (default value)
    • Dark
    • Light
    • Dark_Primary
    • Dark_Secondary
    • Dark_Success
    • Dark_Danger
    • Dark_Warning
    • Dark_Info
    • Dark_Dark
    • Dark_Link
    • Light_Primary
    • Light_Secondary
    • Light_Success
    • Light_Danger
    • Light_Warning
    • Light_Info
    • Light_Dark
    • Light_Link
  • size: The value indicates size of the base navigation bar. Should be one of the following values:
    • Default (default value)
    • Sm
    • Md
    • Lg
    • Xl

abp-nav-item Attributes

dropdown: A value that sets the navigation item to be a dropdown menu if provided. Can be one of the following values:

  • false (default value)
  • true

Example:

<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="sr-only">(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>

Contributors


Last updated: July 31, 2024 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More