CodeBlanks Logo Icon CodeBlanks
Login Register

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.

Practice 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.

Starter code

App.jsx
import { Link } from "react-router-dom";

// Write the Sidebar component here

Sample solution

App.jsx
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;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What is usually in the sidebar?

  • A form field
  • Tablo
  • A list of links Correct answer
  • Modal

Explanation: The sidebar holds a list of links for navigation.

2 Sidebar link

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

<nav><____ to="/">Ana sayfa</Link></nav>
Answer 
import { Link } from "react-router-dom";

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

Explanation: Link to provides a page link.

3 Sidebar and header: match the terms

Term Meaning
Sidebar Left menu
Header Top header
Link Page link
main Content area

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart