Build Youtube in React 03: Header navigation
We’re finally going to start with our first component: the header navigation.
Let’s look at a high fidelity mockup first to get a clear picture of what we are about to build. Click on the picture to see the image in high resolution.
Let’s get started with the navigation at the top. The Youtube application has a sticky header with a logo, a search bar and some icons on the right.
Because we know that we are going to use
Redux for our state management, it saves us work if we distinguish between presentational components (dumb components) and stateful components (connect to
Redux) from the very beginning. You can read more about this topic in this excellent Medium post.
As you can see, we have an avatar in the top right corner of our nav bar. Without having done any state management yet, we can already tell that we will probably have to fetch the image from some remote server. Therefore, the header nav bar will certainly become a stateful component at some point.
2. Create Header Navigation component
2.1 Install Semantic UI
Since the goal of this tutorial series is to demonstrate how to orchestrate the different libraries in the
React ecosystem, we don’t want to fiddle too much with tweaking
CSS. Therefore, we are going to use some pre-built components from the
React implementation of Semantic UI.
Head over to your terminal to install it:
You can find more information on the installation at Semantic UI’s usage page.
The first dependency,
semantic-ui-react, contains all the components this library offers. The second dependency,
semantic-ui-css, contains styling so that we get a nice and clean look. The
semantic-ui-react package comes with tree-shaking capabilities, i.e. Webpack won’t include components, we don’t use in our app
Note that we will only be using a few components from
Semantic UI, so we won’t use much library magic in this tutorial series. Most components as well as the entire logic will be hand crafted. So please don’t freak out in case you don’t like
Semantic UI 😁.
As a last step, head over to your
index.js file and import the styles that
semantic-ui-css provides by adding and
import statement at the top.
2.2. Getting the MyTube logo
- Head over to this link to download the MyTube logo file (right click on the image and click save as)
- Create a directory called inside
- Create a directory inside
- Copy the image you have just downloaded into the
2.3. Creating the header nav component
- Create a new directory inside your
- Within containers, add another directory called
- Create a
HeaderNav.scssfile in the
HeaderNavdirectory you’ve just created
To create the top menu, we are going to use
Semantic UI's Menu component. A menu is a
flexbox-based component that can align items horizontally or vertically. The default is horizontal.
Menu.Item elements are placed next to each other in a row (in the following image we have three
If we have another look at our mock again, we’re aiming at the following layout. Click on the image to see it in high resolution.
The left orange element is a
Menu.Item element that contains the logo. Then, we have a Menu.Menu item that covers the rest of the horizontal space and that aligns its two children on the left and right edge. The
Menu.Menu component is used to group elements together and is usually a child of a
Menu element. You can nest an arbitrary amount of
Menu.Menu items inside each other. Let’s implement the
Menu.Item and the
Menu.Menu element first.
2.4. Header navigation skeleton
The root element is a
Menu item that is provided by
Semantic UI. We can make the header sticky by setting
borderless attribute prevents the menu inserting vertical divider lines between the
Menu.Item and the
Menu.Menu element. The first
Menu.Item element contains the logo.
Semantic UI already provides some kind of default styling, it is important that we create very specific
SCSS rules so that we override the
Menu's default styling. Therefore, we use
.ui.menu.top-menu in our
We want the second element (
Menu.Menu) to span the entire available width.
Menu elements are
flex elements per default, so there is no need to specify
display: flex. To customise its appearance, we give it a class called
top-menu. By setting
1, we force the
nav-container to span the entire available width that is not already covered by the logo element.
We disable the
border by setting
none because per default,
Semantic UI renders a
bottom border with a drop shadow for the
Menu component. We also set the
0 to keep the menu more compact.
For testing purposes, you should replace the
Hello World div in your
App.js with your HeaderNav component so you can see how the component evolves along this tutorial.
2.5. Header navigation search bar
Great. Now, we only need to include an input where the user can type his search term into.
Semantic UI provides an Input component that is typically part of a form. So we make put an input element into our
As you can see, we have added
Menu.Item component that wraps now contains a
Form element. The nesting of these component is not arbitrary or magical, it was just copied from Semantic UI’s documentation.
We’ve also added the
.search-input class to do some custom styling. We want the element to
1/3 of the available width wide, that’s why we assign
33% as a width. This number is rather arbitrary you can also try out different values, but we don’t want the input to be too big.
So, almost done. Now we only need the icons and then we have a Youtube-like search bar.
2.6. Header navigation icons
Now, we only need a few icons and the avatar.
Semantic UI comes with a few icons out of the box. We need a
chat and a
bell icon. We also need a circular image for an avatar.
Let’s first think about how we will do this. Here is a more detailed image of our nav bar’s layout.
We will use a
Menu.Menu component again. By nesting a Menu.Menu component (blue) in here, we can group our four icons and the avator together. The icons are shown as red squares. The avatar image is shown as a red circle.
Add the following code directly underneath the
Note that we added a new SCSS class called
.header-icon . This
SCSS class makes sure that the icons are displayed in a grey color.
Semantic UI provides an Icon component that allows us to render the icons we want.
To render a round, avatar-like image, we simply use a placeholder image from http://via.placeholder.com/80×80 for now.
Here’s the entire code of our
Here’s how our header nav bar looks in the browser. Click on the image to see it in high resolution.
That looks pretty decent 😁. Well done! Don’t forget to commit your changes!
As always, you can find this projects code on our youtube-react Github repository.Follow @productioncoder
Please follow me on Twitter @productioncoder to stay up-to-date. I’m happy to receive feedback of any kind.
If you are interested in more high-quality production-ready content, please enter your email below.