Sidebar and header

Learn to set up a page layout with a sidebar and header.

Sidebar and header

Many apps have a sidebar on the left and a header on top. These two components sit side by side inside the layout; the content area fills the remaining space.

The sidebar usually holds a list of links; the Link component navigates between pages. The header carries the logo and a user menu.

CSS Flexbox or Grid are common choices for the layout; the sidebar gets a fixed width, the content a flexible width.

Header content

The header usually carries the app logo, a search box and a user menu. It has a fixed height and sits beside the sidebar.

Making the header a separate component makes it easy to swap inside the layout. If you want different headers on different pages, the layout can take the header as a prop.

On mobile, the header often has a menu button that opens the sidebar; this is part of responsive design.

Exercise Sidebar component

Complete the skeleton below. Write a Sidebar component; return a nav containing <Link to="/">Home</Link> and <Link to="/products">Products</Link>. Export it.

Show example solution

import { Link } from "react-router-dom";

function Sidebar() {
  return (
    <nav>
      <Link to="/">Ana sayfa</Link>
      <Link to="/products">Ürünler</Link>
    </nav>
  );
}

export default Sidebar;

Test yourself

What is usually in the sidebar?
- A form field
- Tablo
- A list of links
- Modal
Show answer

A list of links — The sidebar holds a list of links for navigation.

Sidebar link

import { Link } from "react-router-dom";

<nav><____ to="/">Ana sayfa</Link></nav>

Show answer

import { Link } from "react-router-dom";

<nav><Link to="/">Ana sayfa</Link></nav>

Sidebar and header: match the terms

Sidebar

Left menu
Header

Top header
Link

Page link
main

Content area

Next lesson: Layout with Outlet

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies