The most important aspect of a mobile-first design is the navigation. It's especially difficult to get this right on mobile devices because there's barely enough room for feature content, let alone tools to move from feature to feature. Thankfully, Bootstrap handles much of the difficulty for you.

In this section, you'll learn how to implement two types of navigation. You'll start with toolbar navigation, and then you'll build a sidebar navigation section. This makes up part of the UI skeleton that you'll start with. What I find really useful about this approach is that, once the navigation mechanisms are in place, it's easy to add new pages and to move around in the app as I build it.

Let's start with the Navbar. This is a component found in most applications and is statically positioned at the top of the screen. Within this bar, you'll add some navigation links. Here's what the JSX for this looks like:

{/* The "NavBar" is statically-placed across the
   top of every page. It contains things like the
   title of the application, and menu items. */}
<Navbar className="navbar-top" fluid>
  <Navbar.Header>
    <Navbar.Brand>
      <Link to="/">Mobile-First React</Link>
    </Navbar.Brand>

    {/* The "<Navbar.Taggle>" coponent is used to replace any
       navigation links with a drop-down menu for smaller
       screens. */}
    <Navbar.Toggle />
  </Navbar.Header>

  {/* The actual menu with links to makes. It's wrapped
     in the "<Navbar.Collapse>"" component so that it
     work properly when the links have been collapsed. */}
  <Navbar.Collapse>
    <Nav pullRight>
      <IndexLinkContainer to="/">
        <MenuItem>Home</MenuItem>
      </IndexLinkContainer>
      <LinkContainer to="forms">
        <MenuItem>Forms</MenuItem>
      </LinkContainer>
      <LinkContainer to="lists">
        <MenuItem>Lists</MenuItem>
      </LinkContainer>
    </Nav>
  </Navbar.Collapse>
</Navbar> 

Here's what the navigation bar looks like:

The <Navbar.Header> component defines the title of the application and is placed to the left of the navigation bar. The links themselves are placed in the <Nav> element and the pullRight property aligns them to the right side of the navigation bar. You can see that, instead of using <Link> from the react-router package, you're using <LinkContainer> and <IndexLinkContainer>. These components come from the react-router-bootstrap package. They're necessary to make Bootstrap links work properly with the router.

The <Nav> element is wrapped in a <Navbar.Collapse> element and the header contains a <Navbar.Toggle> button. These components are necessary to collapse the links into a drop-down menu for smaller screens. Since it's based on the browser's width, you can just resize your browser window to see it in action:

The links that were displayed are now collapsed into a standard menu button. When this button is clicked, the same links are displayed in a vertical fashion. This works much better on smaller devices. But with larger screens, having all navigation displayed in the top navigation bar might not be ideal. The standard approach is to implement a left-hand sidebar with navigation links stacked vertically. Let's implement this now:

{/* This navigation menu has the same links
   as the top navbar. The difference is that
   this navigation is a sidebar. It's completely
   hidden on smaller screens. */}
<Col sm={3} md={2} className="sidebar">
  <Nav stacked>
    <IndexLinkContainer to="/">
      <NavItem>Home</NavItem>
    </IndexLinkContainer>
    <LinkContainer to="forms">
      <NavItem>Forms</NavItem>
    </LinkContainer>
    <LinkContainer to="lists">
      <NavItem>Lists</NavItem>
    </LinkContainer>
  </Nav>
</Col> 

The <Col> element is the container for the <Nav> and you've added your own class name to it. You'll see why in a moment. Inside the <Nav> element, things look exactly the same as they do in the navigation toolbar, with link containers and menu items. Here's what the sidebar looks like:

Now, the reason that we needed to add that custom sidebar class name to the containing element was so that we can hide it completely on smaller devices. Let's take a look at the CSS involved:

.sidebar { 
  display: none; 
} 
 
@media (min-width: 768px) { 
  .sidebar { 
    display: block; 
    position: fixed; 
    top: 60px; 
  } 
} 

This CSS, along with the overall structure of this example, is adapted from this Bootstrap example: http://getbootstrap.com/examples/dashboard/. The idea behind this media query is that if the minimum browser width is 768px, then show the sidebar in a fixed position. Otherwise, hide it completely because we're on a smaller screen.

At this point, you have two navigation components collaborating with one another to change how they're displayed based on the screen resolution.