Skip to content
A simple off canvas menu built with styled-components πŸ’…
JavaScript HTML
Branch: master
Clone or download


πŸ’… styled-off-canvas

A simple off canvas menu built with styled-components

Node CI build status Netlify Status JavaScript Standard Style Built with Styled Components Dependabot Status


styled-off-canvas is a customizable off-canvas menu built with React and styled-components


A demo can be found here: Demo


yarn install styled-off-canvas
# or via npm
npm install styled-off-canvas


For more flexibility you will keep the menu state (open or closed) in your application. The example below shows a very simple implementation.


styled-off-canvas comes with three components: <StyledOffCanvas />, <Menu /> and <Overlay />.

<StyledOffCanvas /> is a wrapping component which provides all settings/properties.

<Menu /> is the off-canvas menu itself. You can pass anything you want as children (e.g. styled list of react-router links)

<Overlay /> is an optional component which renders a semi-transparent layer above your app content.


import React, { useState } from 'react'
import { StyledOffCanvas, Menu, Overlay } from 'styled-off-canvas'

const App = () => {
  const [isOpen, setIsOpen] = useState(false)

  return (
      onClose={() => setIsOpen(false)}

      <button onClick={() => setIsOpen(!isOpen)}>Toggle menu</button>

            <a onClick={() => setIsOpen(false)}>close</a>
            <a href='/about'>About</a>
            <a href='/contact'>Contact</a>

      <Overlay />

      <div>this is some nice content!</div>

export default App


<StyledOffCanvas /> component

  • isOpen = false: if the menu should be visible or not
  • menuBackground = '#fff': background color of the menu
  • menuDuration = '500ms': duration of the css transition of the menu
  • onClose: callback function if menu closes (e.g. by click on the overlay)
  • closeOnEsc = true: if the menu should close on esc keydown
  • overlayBackground = '#000': background color of the overlay
  • overlayDuration = '500ms': duration of the open/close animation of the overlay
  • overlayOpacity = 0.2: css opacity of the overlay
  • position = 'right': position of the menu (left or right)
  • width = '300px': maximum width of the menu

Also <Menu /> and <Overlay /> can additionally be customized with styled-components

// example

<Menu css={{ border: `1px solid ${}` }}>...</Menu>

Local development

Install dependencies and start the development server

yarn dev

or via npm

npm install
npm run dev

Open localhost:8080 in your browser.



Copyright (c) 2019-present Marco Streng. See LICENSE for details.

You can’t perform that action at this time.