CSS layout has grown and evolved into a robust set of tools to accomplish some fantastic modern layouts.
The problem is that we are still teaching CSS as something that is" hacked" together by using" tricks" to get our desired web layouts.
Learning CSS like this typically leads us down one of two paths: We either build fragile page layouts using 
the "see what sticks" method of CSS, or we give up and declare that CSS is too tricky and bring in an X column grid system like Twitter Bootstrap.

Creating page layouts in CSS doesn't have to be complicated. Like how you make much of your everyday speech using just a small 
subset of vocabulary composed together, you can achieve sophisticated layouts by composing simple low-level layout primitives in unique ways.

In this course, you will learn foundational layout primitives that you can use to build many of your more complex layouts. You will also learn 
how to apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. To do this, we 
will recreate many of the layouts found in the wild using the principles mentioned above.

This course does not require extensive knowledge of CSS. It does assume that you have a basic understanding of the CSS box model, CSS specificity, 
CSS selectors, and CSS sizing units. Though you can apply the principles in this course to any modern web framework, including no framework 
development, this course will be using React and assume you have a basic understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced developers who want to take their layout skills to the next level. This course will 
teach you the practical skills you need to build modern layouts for the web without depending on heavy CSS frameworks. Unlike courses and blog 
posts that teach each layout property in isolation, our product teaches practical layout patterns that you can use every day when solving your 
layout challenges.

In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives.
Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid.

Composing Layouts in React

---
title: How to Build a React Navbar With a Menu and Header
slug: menu-and-header
description: This lesson is going to focus on getting the menu and header completed on our mock Settings Page
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/pgqqgm9fbe
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/travis-waith-mair-composing-layout-in-react-app/-/tree/main/module_05/lesson_01
---

This lesson is going to focus on getting the menu and header completed on our mock Settings Page.

![Menu and header of settings page](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.01/public/assets/menu-and-header.png)

We will be doing everything in [codesandbox.io](https://codesandbox.io/), using their React Starter Template. To ensure you are all using the identical dependency versions, [I would recommend going to this sandbox that I have already made and forking it](https://codesandbox.io/s/starter-template-to-fork-5vqku) by clicking on the "Fork" button in the upper right-hand corner:

![Fork button](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.01/public/assets/fork-button.png)

This will create your own copy so you can follow along.

## Setting up the `index.js`

Let's get a few things in place so we can get started. The first thing we need to do is install `styled-components` and the `@bedrock-layout/css-reset`. That can be done on the left-hand side, under `Dependencies`:

![Menu and header of settings page](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.01/public/assets/dependencies.png)

Just search for the package you want, like `styled-components` and select it. Codesandbox will then install it for you. This is equivalent to running `npm install styled-components` on your local machine.

Then in the `index.js` file, I am going to import the css-reset:

```javascript
import "@bedrock-layout/css-reset/lib/reset.css";
import { StrictMode } from "react";
import ReactDOM from "react-dom";
```

While we are in this file, let's look at AppBoundary, which is something I like to add to all my projects. High-resolution screens are becoming more commonplace, and websites are much easier to use when the content width is capped at a useable width. Bedrock already has a component called `AppBoundary` that limits the width at `1920px` and keeps the content centered horizontally on the screen.

So let's install `@bedrock-layout/appboundary` and import it into our `index.js` file:

```javascript
import "@bedrock-layout/css-reset/lib/reset.css";
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { AppBoundary } from "@bedrock-layout/appboundary";
```

Then all we need to do is wrap our `App` component in `index.js` in the `AppBoundary`:

```jsx
ReactDOM.render(
  <StrictMode>
    <AppBoundary>
      <App />
    </AppBoundary>
  </StrictMode>,
  rootElement
);
```

## The menu's basic layout

In `App.js`, let's start off by removing the imported styled sheet at the top and the className on the wrapper div. (Don't delete the stylesheet from the project as we will use that later.) Now our entire file looks like this:

```jsx
export default function App() {
  return (
    <div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}
```

Before we think about layout, let's just stub out what is going to be in our MenuBar. We need a logo, a navigation area, a search input, an icon, and a profile image. Let's remove the sandbox content and add our menu content:

```jsx
return (
  <div>
    <div>
      <div>Logo</div>
      <nav>
        <ul>
          <li>Dashboard</li>
          <li>Job</li>
          <li>Applicants</li>
          <li>Company</li>
        </ul>
      </nav>
      <input placeholder="Search" />
      <div>icon</div>
      <div>profile</div>
    </div>
  </div>
);
```

What we need to do in this MenuBar is inline everything, with the nav section stretching out to use all available space. So let's bring in the Inline component by installing `@bedrock-layout/inline` and importing it into the file. Just like above you install it by searching for it in the dependency list on the left.

```jsx
import { Inline } from "@bedrock-layout/inline";
```

Then we can use that as the wrapper of our MenuBar like this:

```jsx
 <Inline gutter="lg" align="center" stretch={1}>
```

At this point, our MenuBar looks like this:

![Menu inlined](https://d2uusema5elisf.cloudfront.net/courses/composing-layouts-in-react/module_05/lesson_05.01/public/assets/menu-inlined.png)

This lesson is going to focus on getting the menu and header completed on our mock Settings Page