Navbar

A navbar, short for navigation bar, is like a trusty sidekick that helps users navigate a website. It's the trusty compass that guides users through the digital wilderness, pointing them in the right direction with its list of links and menu items. With a navbar, users can easily find their way around a website, avoiding getting lost in the digital jungle.

Basic example

Wrap a series of buttons with .btn in .btn-group.

<nav class="navbar">
    <div class="left">
        <ul class="nav horizontal">
            <li class="item">
                <a class="link active" aria-current="page" href="#">Active</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link disabled" aria-disabled="true">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="center">
        search
    </div>
    <div class="right">
        right
    </div>
</nav>

@use "~/src/styles/app.scss" as app;

@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$nav: functions.get-theme(app.$theme, 'components.nav');

@include mixins.generate-component(
    $nav,
    "nav",
    app.$config,
    app.$theme
);

$navbar: functions.get-theme(app.$theme, 'components.navbar');

@include mixins.generate-component(
    $navbar,
    "navbar",
    app.$config,
    app.$theme
);

Centered navbar example

<nav class="navbar" style="--xii-navbar-grid-template-columns: 1fr 100px 1fr">
    <div class="left">
        <ul class="nav horizontal">
            <li class="item">
                <a class="link active" aria-current="page" href="#">Active</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link" href="#">Link</a>
            </li>
            <li class="item">
                <a class="link disabled" aria-disabled="true">Disabled</a>
            </li>
        </ul>
    </div>
    <div class="center">
        logo
    </div>
    <div class="right">
        <ul class="nav horizontal">
            <li class="item">
                <a class="item" href="#">Github</a>
            </li>
        </ul>
    </div>
</nav>

@use "~/src/styles/app.scss" as app;

@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$nav: functions.get-theme(app.$theme, 'components.nav');

@include mixins.generate-component(
    $nav,
    "nav",
    app.$config,
    app.$theme
);

$navbar: functions.get-theme(app.$theme, 'components.navbar');

@include mixins.generate-component(
    $navbar,
    "navbar",
    app.$config,
    app.$theme
);