@page
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.NavsModel
@{
    ViewData["Title"] = "Navs";
}

<h2>Navs</h2>

<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>

<h4># Navs Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">

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

    </div>
    <div class="code-area">
        <pre>
        &lt;abp-nav nav-style=&quot;Pill&quot; align=&quot;Center&quot;&gt;
            &lt;abp-nav-item&gt;
                &lt;a abp-nav-link Active=&quot;true&quot; href=&quot;#&quot;&gt;Active&lt;/a&gt;
            &lt;/abp-nav-item&gt;
            &lt;abp-nav-item &gt;
                &lt;a abp-nav-link  href=&quot;#&quot;&gt;Longer nav link&lt;/a&gt;
            &lt;/abp-nav-item&gt;
            &lt;abp-nav-item &gt;
                &lt;a abp-nav-link  href=&quot;#&quot;&gt;link&lt;/a&gt;
            &lt;/abp-nav-item&gt;
            &lt;abp-nav-item &gt;
                &lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;disabled&lt;/a&gt;
            &lt;/abp-nav-item&gt;
        &lt;/abp-nav&gt;
</pre>
    </div>
</div>

<h4># Navs Examples</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <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>
                    <span abp-navbar-text>
                        Sample Text
                    </span>
                </abp-navbar-nav>
            </abp-navbar-toggle>
        </abp-nav-bar>

    </div>
    <div class="code-area">
        <pre>
        &lt;abp-nav-bar size=&quot;Lg&quot; navbar-style=&quot;Dark_Warning&quot;&gt;
            &lt;a abp-navbar-brand href=&quot;#&quot;&gt;Navbar&lt;/a&gt;
            &lt;abp-navbar-toggle&gt;
                &lt;abp-navbar-nav&gt;
                    &lt;abp-nav-item active=&quot;true&quot;&gt;
                        &lt;a abp-nav-link href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
                    &lt;/abp-nav-item&gt;
                    &lt;abp-nav-item&gt;
                        &lt;a abp-nav-link href=&quot;#&quot;&gt;Link&lt;/a&gt;
                    &lt;/abp-nav-item&gt;
                    &lt;abp-nav-item dropdown=&quot;true&quot;&gt;
                        &lt;abp-dropdown&gt;
                            &lt;abp-dropdown-button nav-link=&quot;true&quot; text=&quot;Dropdown&quot; /&gt;
                            &lt;abp-dropdown-menu&gt;
                                &lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
                                &lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
                                &lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
                                &lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
                                &lt;abp-dropdown-divider /&gt;
                                &lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
                            &lt;/abp-dropdown-menu&gt;
                        &lt;/abp-dropdown&gt;
                    &lt;/abp-nav-item&gt;
                    &lt;abp-nav-item&gt;
                        &lt;a abp-nav-link disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled&lt;/a&gt;
                    &lt;/abp-nav-item&gt;
                &lt;/abp-navbar-nav&gt;            
            &lt;span abp-navbar-text&gt;
                 Sample Text
            &lt;/span&gt;
            &lt;/abp-navbar-toggle&gt;
        &lt;/abp-nav-bar&gt;
</pre>
    </div>
</div>