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

@use '~/styles/app.scss' as app;

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

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

Vertical example

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

<ul class="nav vertical">
    <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 "~/styles/app.scss" as app;

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

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