Nav

The navigation component is like a trusty digital compass, guiding users through the labyrinth of a website. It's a key component in web development, serving as a navigational bar that provides easy access to different sections of a website. With a navigation component, users can quickly navigate through the site's content and find what they're looking for, without feeling like they're wandering through a digital maze.

Basic example

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

<ul class="nav">
    <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 disabled" aria-disabled="true">Disabled</a>
    </li>
</ul>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@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
);