Discuss

Creating a Bootstrap 5 Navbar

Intro

In this tutorial we will show you how to build a Bootstrap 5 Navbar from scratch. We will build a basic navbar with a logo and the navigation links aligned right. We will also apply a dark theme to the navbar.
The navbar component consists of a few parts:

  • Navbar brand - this is your logo or company name.
  • Navbar toggler - this is the button use to open the navigation links on smaller screens, where it’s collapsed.
  • Navbar collapse - this is the element which hides/collapses the navigation links on smaller screens
  • Navbar nav with Links - these are your navigation links.
  • A container (optional) - you can add a container inside the navbar if you don’t want it to expand to the full width of the screen, but instead use the standard Bootstrap 5 container width.

Creating the Navbar

We created a new blank page:

Screenshot_2

Click on add new component button:

Screenshot_3

Select Elements > Navigation > Navbar

Screenshot_4

Then click the add element inside the Navbar:

Screenshot_5

First we add a container, as we don’t want our navbar to expand to the full width of the screen:

Screenshot_6

You can change the container type to Fluid (instead of fixed) if you want to have your navbar expand to the full width of the screen:

Screenshot_7

Then inside the container, add new component:

Screenshot_8

Select Navbar Brand:

Screenshot_9

A Navbar Brand with a default text is added, we will change this later.
Add an element after the Navbar Brand:

Screenshot_10

Select Navbar Toggler:

Screenshot_11

The Navbar Toggler is added on your page, along with the Navbar Collapse which it controls.
Add new element inside the Collapse element:

Screenshot_12

And select Lists > Navbar Nav:

Screenshot_13

Finally, inside the Navbar Nav, add a new element:

Screenshot_14

And select Nav Item or Nav Dropdown:

Screenshot_15

Add as many items or dropdowns as you need. This is the result, a basic navbar with a basic styling:

Screenshot_16

Customizing the Navbar

We can customize the Navbar a bit.

Align Nav Items Right

By default the nav items are aligned left, next to the Nav Brand element. You can easily change this and align them right.

Select the Navbar Nav element in the App Structure:

Screenshot_17

Scroll down and change the Margin Left to Auto by dragging the margin left handle:

Screenshot_18

And that’s all. You have your nav items aligned right!

By default the Navbar Brand comes with a default text. You can change this text or add a logo instead:

Screenshot_19

Double click the Navbar Brand text in design view:

Screenshot_20

And just delete the default text.
Then right click the Navbar Brand element in App Structure:

Screenshot_21

And add an image inside it:

Screenshot_22

Select your image/logo:

Screenshot_23

The Assests picker appears - so we select our logo:

Screenshot_24

Set the width and height for your logo:

Screenshot_25

And you are done. You have the logo added to your Navbar:

Screenshot_26

Apply a Dark Theme

You can change the theme of the navbar - it’s background and links colors.
Select your Navbar element in the App Structure:

Screenshot_27

Scroll down to Appearance in the Properties panel and change a Back Color - in our case we select Dark:

Screenshot_28

Then, in order to make the links colors look nice on the dark background you need to change the Navbar theme. Open the Theme dropdown, which defaults to Light:

Screenshot_29

And set it to Dark, as we selected a dark background color. When using light background colors, the theme should be set to Light:

Screenshot_30

Change the Expand Properties

By default, the Navbar is collapsed on small screens, up to lg (laptop) size. Then on lg and bigger screen sizes it’s expanded. You can see this, by checking the Expand option on a lg screen size:

Screenshot_31

If you switch to a md (tablet) size or smaller - the Expand option is not checked:

Screenshot_32

You can make your navbar expand on md (tablet) size, by simply clicking this option while on a md screen size:

Screenshot_33

And you are done! Adjust the actual navbar links urls and texts and you have a fully functional navbar for your website or app.