Svelte Navbar
A Svelte Navbar is a navigation header that is placed at the top of the page. It can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class="navbar navbar-default">. Check this documentation and examples for Svelte’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Example
<BaseNav
model="showMenu"
menuClasses="justify-content-end navbar-collapse"
topClasses="navbar-horizontal navbar-main navbar-dark bg-default"
show={showMenu === false ? false : true}
expand="lg">
<div slot="brand" class="navbar-wrapper">
<a class="navbar-brand" href="#">Default Color</a>
</div>
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="/">
<img src="../img/brand/red.png" alt="image" />
</a>
</div>
<div class="col-6 collapse-close">
<button
type="button"
class="navbar-toggler"
on:click={() => toggleNavbar()}>
<span />
<span />
</button>
</div>
</div>
</div>
<hr class="d-lg-none" />
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="ni ni-favourite-28"></i>
<span class="nav-link-inner--text d-lg-none">Discover</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="ni ni-notification-70"></i>
<span class="nav-link-inner--text d-lg-none">Profile</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="ni ni-settings-gear-65"></i>
<span class="nav-link-inner--text d-lg-none">Settings</span>
</a>
</li>
</ul>
</BaseNav>Variations
<BaseNav
model="showMenu"
menuClasses="justify-content-end navbar-collapse"
topClasses="navbar-horizontal navbar-main navbar-dark bg-primary"
show={showMenu === false ? false : true}
expand="lg">
<div slot="brand" class="navbar-wrapper">
<a class="navbar-brand" href="#">Primary Color</a>
</div>
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="/">
<img src="../img/brand/red.png" alt="image" />
</a>
</div>
<div class="col-6 collapse-close">
<button
type="button"
class="navbar-toggler"
on:click={() => toggleNavbar()}>
<span />
<span />
</button>
</div>
</div>
</div>
<hr class="d-lg-none" />
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<span class="nav-link-inner--text">Discover</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<span class="nav-link-inner--text">Profile</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<span class="nav-link-inner--text">Settings</span>
</a>
</li>
</ul>
</BaseNav>
<BaseNav
model="showMenu"
menuClasses="justify-content-end navbar-collapse"
topClasses="navbar-horizontal navbar-main navbar-dark bg-success"
show={showMenu === false ? false : true}
expand="lg">
<div slot="brand" class="navbar-wrapper">
<a class="navbar-brand" href="#">Success Color</a>
</div>
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="/">
<img src="../img/brand/red.png" alt="image" />
</a>
</div>
<div class="col-6 collapse-close">
<button
type="button"
class="navbar-toggler"
on:click={() => toggleNavbar()}>
<span />
<span />
</button>
</div>
</div>
</div>
<hr class="d-lg-none" />
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="ni ni-favourite-28"></i>
<span class="nav-link-inner--text d-lg-none">Favorites</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="ni ni-planet"></i>
<span class="nav-link-inner--text d-lg-none">Another action</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="ni ni-settings-gear-65"></i>
<span class="nav-link-inner--text d-lg-none">Settings</span>
</a>
</li>
</ul>
</BaseNav>
<BaseNav
model="showMenu"
menuClasses="justify-content-end navbar-collapse"
topClasses="navbar-horizontal navbar-main navbar-dark bg-danger"
show={showMenu === false ? false : true}
expand="lg">
<div slot="brand" class="navbar-wrapper">
<a class="navbar-brand" href="#">Danger Color</a>
</div>
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="/">
<img src="../img/brand/red.png" alt="image" />
</a>
</div>
<div class="col-6 collapse-close">
<button
type="button"
class="navbar-toggler"
on:click={() => toggleNavbar()}>
<span />
<span />
</button>
</div>
</div>
</div>
<hr class="d-lg-none" />
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-facebook-square"></i>
<span class="nav-link-inner--text d-lg-none">Facebook</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-twitter"></i>
<span class="nav-link-inner--text d-lg-none">Twitter</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-google-plus"></i>
<span class="nav-link-inner--text d-lg-none">Google +</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-instagram"></i>
<span class="nav-link-inner--text d-lg-none">Instagram</span>
</a>
</li>
</ul>
</BaseNav>
<BaseNav
model="showMenu"
menuClasses="justify-content-end navbar-collapse"
topClasses="navbar-horizontal navbar-main navbar-dark bg-warning"
show={showMenu === false ? false : true}
expand="lg">
<div slot="brand" class="navbar-wrapper">
<a class="navbar-brand" href="#">Warning Color</a>
</div>
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="/">
<img src="../img/brand/red.png" alt="image" />
</a>
</div>
<div class="col-6 collapse-close">
<button
type="button"
class="navbar-toggler"
on:click={() => toggleNavbar()}>
<span />
<span />
</button>
</div>
</div>
</div>
<hr class="d-lg-none" />
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-facebook-square"></i>
<span class="nav-link-inner--text d-lg-none">Facebook</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-twitter"></i>
<span class="nav-link-inner--text d-lg-none">Twitter</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-pinterest"></i>
<span class="nav-link-inner--text d-lg-none">Pinterest</span>
</a>
</li>
</ul>
</BaseNav>
<BaseNav
model="showMenu"
menuClasses="justify-content-end navbar-collapse"
topClasses="navbar-horizontal navbar-main navbar-dark bg-info"
show={showMenu === false ? false : true}
expand="lg">
<div slot="brand" class="navbar-wrapper">
<a class="navbar-brand" href="#">Info Color</a>
</div>
<div class="navbar-collapse-header">
<div class="row">
<div class="col-6 collapse-brand">
<a href="/">
<img src="../img/brand/red.png" alt="image" />
</a>
</div>
<div class="col-6 collapse-close">
<button
type="button"
class="navbar-toggler"
on:click={() => toggleNavbar()}>
<span />
<span />
</button>
</div>
</div>
</div>
<hr class="d-lg-none" />
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-facebook-square"></i>
<span class="nav-link-inner--text">Facebook</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-twitter"></i>
<span class="nav-link-inner--text">Twitter</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link nav-link-icon" href="#">
<i class="fab fa-instagram"></i>
<span class="nav-link-inner--text">Instagram</span>
</a>
</li>
</ul>
</BaseNav>
</div>