Nav
Main navigation menu top- and sidebars
Top level elements
bf-nav-side
bf-nav-top
main
A <main> sibling following a .bf-nav-top and/or .bf-nav-side should get
placed appropriately (margin and padding in order to avoid overlapping with top
bar or side bar):
bf-nav-mobile
To get correct animation transitions and accessibility, use:
.bf-nav-mobile-opento open the mobile nav.bf-nav-mobile-closeto close the mobile nav.bf-nav-mobile-goneon load and after close animation end
To disable main scrollbar while mobile nav is open, apply
.bf-nav-mobile-is-open to <html> element.
bf-nav-top-hide-for-mobile
Apply .bf-nav-top-hide-for-mobile to the top bar when scrolled down and mobile
nav is not open.
Logo and app name
bf-nav-logo
Replace the {logo} below with any custom logo (either <svg> or <img>
should work)
<div class="bf-nav-logo">
<div class="bf-nav-logo-graphic">{logo}</div>
<div class="bf-nav-logo-name">App name</div>
</div>bf-nav-item
Links placed in the sidebar should have text and an icon:
<a href="#path">
<div class="bf-nav-item">
<i class="bf-nav-item-icon fa-solid fa-user"></i>
<span class="bf-nav-item-text">Profile</span>
</div>
</a>For top bar, you can have the same as in sidebar (above), or an icon alone:
<a href="#path" aria-label="Profile">
<div class="bf-nav-item bf-nav-item-icon-only">
<i class="bf-nav-item-icon fa-solid fa-user"></i>
</div>
</a>For direct actions (like opening a dropdown menu), use <button type="button">
instead of <a>.
Skip to main button
Give the <main> element an ID and link to it with an <a> styled as a small
button. Place the button as the first content of the page to allow keyboard
users to skip the menu items when tabbing through the
page.
.bf-hide-until-focus lets it stay out of the way until it gets focused.
<a href="#mainContent" class="bf-hide-until-focus bf-button bf-button-small">
Skip to main content
</a>
<main id="mainContent">main content goes here</main>Responsive menu
In order to show mobile menu for screens smaller than 1600px and sidebar for
wider, you can use to-xl and from-xl class names. For instance: