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