Bootstrap - Navbars: Your Gateway to Professional Web Navigation

Hello there, future web developers! Today, we're going to dive into one of the most important components of modern web design: the navbar. As your friendly neighborhood computer teacher, I'm excited to guide you through the wonderful world of Bootstrap navbars. So grab your favorite beverage, get comfortable, and let's embark on this coding adventure together!

How it Works

Before we start building our navbars, let's understand what they are and how they work. A navbar, short for navigation bar, is like the map of your website. It helps users find their way around your digital creation. In Bootstrap, navbars are responsive and collapse by default, which means they adjust beautifully to different screen sizes. Isn't that neat?

Basic Navbar

Let's start with a basic navbar. Here's a simple example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

Let's break this down:

• We start with a <nav> element with Bootstrap classes.
• The navbar-brand class is for your website name or logo.
• The navbar-toggler is for mobile view, creating that famous "hamburger" menu.
• Inside the navbar-collapse div, we have our navigation items in an unordered list.

Vertical Navbar

Want to shake things up? Let's try a vertical navbar:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

The magic here is in the flex-column class. It turns our horizontal navbar into a sleek vertical one. Cool, right?

Centered Navbar

For those who like everything aligned just so, here's how to center your navbar items:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

The mx-auto class is our centering superhero here. It applies automatic margins on both sides, centering our content.

Brand

Your brand is your identity. Let's see how to make it shine:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

This code adds a logo next to your brand name. The d-inline-block and align-top classes ensure everything lines up nicely.

Text

Sometimes, you just need some plain text in your navbar:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>

The navbar-text class styles your text to match the navbar's appearance.

Images and Text

Let's combine images and text for a more dynamic navbar:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Welcome to our website!
</span>
</nav>

This creates a navbar with both a logo and a welcoming message. Doesn't that look professional?

Nav

The nav component is the heart of our navbar. Let's look at a more complex example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>

This example includes an active link, regular links, and a disabled link. The sr-only class is for screen readers, improving accessibility.

Navbar Without List

For a cleaner look, you can create a navbar without a list:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</nav>

This achieves the same result without using <ul> and <li> tags.

Navbar with Dropdown

Ready to level up? Let's add a dropdown to our navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</nav>

The dropdown-toggle class creates the dropdown effect, while dropdown-menu and dropdown-item style the dropdown content.

Forms

Need a search bar? No problem! Here's how to add a form to your navbar:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>

The form-inline class keeps our form elements in a line, perfect for navbars.

Color Schemes

Bootstrap offers various color schemes. Here's a dark navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dark Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</nav>

Just change navbar-light to navbar-dark and bg-light to bg-dark. Simple!

Containers

For better alignment, you can wrap your navbar content in a container:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Contained Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
</div>
</div>
</nav>

The container class centers the content and provides a responsive fixed width.

Placement

Fixed Top

Want your navbar to stick to the top? Here's how:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a>
</nav>

The fixed-top class makes your navbar stay at the top of the page as users scroll.

Responsive Behaviors

Bootstrap navbars are responsive by default. They collapse on smaller screens and expand on larger ones. The key is in the navbar-expand-* class:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Navbar content -->
</nav>

This navbar will expand on medium-sized screens and larger.

Toggler

The navbar toggler is what creates the "hamburger" menu on mobile devices:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Navbar content -->
</div>
</nav>

The navbar-toggler button controls the visibility of the navbar content on smaller screens.

External Content

You can toggle content outside the navbar too:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>

This creates a toggler that controls content outside the navbar itself.

Offcanvas

Lastly, let's look at an offcanvas navbar:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<!-- Offcanvas content -->
</div>
</div>
</div>
</nav>

This creates a sidebar that slides in from the side of the screen, perfect for mobile navigation.

And there you have it, folks! We've journeyed through the land of Bootstrap navbars, from basic structures to advanced features. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Happy coding, and may your navbars always guide your users true!

Method	Description
.navbar()	Initializes the navbar component
.collapse('toggle')	Toggles the navbar collapse
.collapse('show')	Shows the navbar collapse
.collapse('hide')	Hides the navbar collapse
.offcanvas('toggle')	Toggles the offcanvas navbar
.offcanvas('show')	Shows the offcanvas navbar
.offcanvas('hide')	Hides the offcanvas navbar

Melayu (ms):

Bootstrap - Navbars: Pintu Masuk Profesional untuk Navigasi Web

Hai sana, bakal pengembang web! Hari ini, kita akan mendalami salah satu komponen paling penting dalam desain web modern: navbar. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengantar Anda ke dunia yang menakjubkan Bootstrap navbars. Jadi, ambil minumannya yang favorit, rasa nyaman, dan mari kita mulai petualangan coding ini bersama!

Cara Kerja

Sebelum kita mulai membuat navbarnya, mari kita pahami apa itu dan bagaimana cara kerjanya. Sebuah navbar, singkatan dari navigation bar, adalah seperti peta website Anda. Ini membantu pengguna menemukan jalan di dalam kreasimu digital. Dalam Bootstrap, navbars adalah responsif dan崩塌 secara default, yang artinya mereka akan menyesuaikan diri dengan indah ke berbagai ukuran layar. Bagaimana itu menarik?

Navbar Dasar

Mari kita mulai dengan navbar dasar. Ini adalah contoh yang sederhana:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

mari kitauraikan ini:

• Kita mulai dengan elemen <nav> dengan kelas Bootstrap.
• Kelas navbar-brand untuk nama website atau logo Anda.
• navbar-toggler untuk tampilan mobile, membuat menu "hamburger" yang terkenal.
• Dalam navbar-collapse div, kita memiliki item navigasi dalam daftar tak terurut.

Navbar Vertikal

Ingin menggoyangkan halangan? Mari kita coba navbar vertikal:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>
</nav>
</nav>

Magisnya ada di kelas flex-column. Ini mengubah navbar horisontal kita menjadi salah satu navbar vertikal yang ramping. Bagus, kan?

Navbar Terpusat

Untuk mereka yang menyukai semua sesuatu rapi, mari kita lihat bagaimana mengatur item navbar agar terpusat:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Home</a>
<a class="nav-item nav-link" href="#">About</a>
<a class="nav-item nav-link" href="#">Services</a>
<a class="nav-item nav-link" href="#">Contact</a>
</div>
</nav>

Kelas mx-auto adalah superhero pengaturannya. Ini menerapkan margin otomatis di kedua sisi, mengatur konten kita di tengah.

Brand

Brand Anda adalah identitas Anda. Mari kita lihat bagaimana membuatnya bersinar:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

Kode ini menambahkan logo di sebelah nama brand Anda. Kelas d-inline-block dan align-top memastikan bahwa segalanya berjejer rapi.

Teks

kadang-kadang, Anda hanya memerlukan beberapa teks biasa di navbar:

<nav

Credits: Image by storyset