Photo by Anastasia Petrova on Unsplash

Reusable Navigation Bar With Drawer In Angular

In this tutorial, I am going to talk about creating a reusable navigation component for both desktop and mobile devices in Angular. To make it reusable, we will have only a single component containing both navigation bar and drawer so we can use this component in multiple projects without doing much extra work.

Step 0: Create a New Project

Using the command prompt, navigate to the folder where you want to create a new project and execute the following command:

ng new NavigationProject [--skip-install]

This is going to take some time as it is also going to install node_modules for the new project. If you don’t want to download the node_modules, you can use the--skip-install option to skip its download.

Alternatively, you can also use StackBlitz. There you have the option to use UI to create new projects and components.

When the project is created, make sure to set the overflow-x to hidden instyle.css file in the app directory of the project as this is very important. Without this, we will be able to scroll the page horizontally when the drawer opens and we don’t want that.

html, body {
    overflow-x: hidden;
}

Step 1: Create the Navigation Bar

Structure

The navigation bar will be fixed at the top of the page and stacked above the main content. Initially, it will have a transparent background and won’t have any shadow but when we scroll the page down, the background opacity will gradually increase and it will have a light shadow. It will indicate that we have scrolled down the page and moreover it gives the navigation bar a nice effect.

We are going to have different layouts (visually) for desktop and mobile devices:

Desktop: The navigation bar will contain the logo and all the navigation links.

Illustration for a desktop device

Mobile: The navigation bar will contain the logo and a menu icon to open the drawer. All the navigation links will be moved to the drawer.

Illustration for a mobile device

So, with the illustrations in hand, let’s move further.

Component Creation

Create a new component for navigation bar named NavBar under NavigationProject > src > app. If you are using CLI to do it, navigate to app folder and execute the following command:

ng g c NavBar --skip-tests

You will see a folder with the name nav-bar gets created in theapp folder.

After creating the component, call it in app.component.html file to make the nav-bar component visible on the page. The file should look like this:

<nav-bar></nav-bar>

We will also create a module for this component. Use the following command:

ng g m NavBar

We will import NavBar and NavDrawer components into this module.

Once the module is created, import it into AppModule.ts .

Code

HTML Code: Let’s start with creating a basic structure of the navbar using some HTML. We will add the drawer later in Step 3.

nav-bar.component.html

CSS Code: Now we will add some CSS styling to it. I have also added the style for the menu icon when the drawer is open.

nav-bar.component.css

TS Code: The UI of the navbar is now ready. Now we need to add the functionality like adding/removing shadow and increasing/decreasing the background opacity when we scroll down/up the page.

The logic for the drawer will be added later in Step 3.

nav-bar.component.ts

Step 2: Create the Navigation Drawer

Structure

We will now create a navigation drawer and later we will link both the navbar and the drawer together. The drawer will slide from left to right and the main content will also slide to right creating a nice effect of revealing the drawer. We will also add an inner shadow to the rightmost part of the drawer to create an illusion of being stacked below the main content.

Component Creation

Create a new component for navigation drawer named NavDrawer under NavigationProject > src > app > nav-bar. If you are using CLI to do it, navigate to nav-bar folder and execute the following command:

ng g c NavDrawer --skip-tests

You will see a folder with the name nav-drawer gets created in the nav-bar folder.

Code

HTML Code: We will start by creating the basic structure of the drawer using HTML.

nav-drawer.component.html

CSS Code: Now we will add some CSS styling to it. Here we also add the effect of drawer sliding from left to right. Basically, we are changing the width of the drawer that creates the sliding effect.

nav-drawer.component.css

TS Code: The UI of the drawer is now ready. Now we will add the functionality of closing the drawer when we click on the link in the drawer.

nav-drawer.component.ts

Step 3: Linking Navbar and Drawer

CSS Code: There are no changes in the nav-bar.component.css file.

HTML Code: Add the nav-drawer component in the nav-bar component and also bind the variable and method. We also need to bind the method toggleNavDrawer() to the menu icon to open the drawer.

nav-bar.component.html

TS Code: Here, we add the functionality for opening and closing the drawer.

nav-bar.component.ts

Step 4: Update AppComponent

Finally, we need to update the AppComponent as well.

HTML Code: We will add nav-bar component here. We also add dummy text in the main section to increase the height of the page so that we will be able to scroll the page to see the effects that we applied to the navbar.

app.component.html

CSS Code: We will now apply the styling to the nav-bar component to make it fixed at the top of the page. Also, we will add the style for the main section to slide to right when the drawer will open.

app.component.css

TS Code: We will write the logic for opening and closing the drawer here.

app.component.ts

And that’s all. We are done with the coding. It’s time to see the final outcome.

Final Result

If you are doing it offline, navigate to your project folder and run the ng s -o command to run the server. The browser window will open automatically when the server is up and running.

Alternatively, you can view the final result from my StackBlitz project below or directly hop over to the webpage here.

Complete Code

You can find the complete code in my GitHub Repo.

amritsingh1097/navigation-bar

I hope you find this tutorial helpful 😃.