ResponsiveMenu

A mobile friendly Menu component.

  • Beta

  • Buy Pro

  • 0.41.2 (latest)

Import#

import { ResponsiveMenu, ResponsiveMenuList } from '@saas-ui-pro/react'

Usage#

ResponsiveMenu renders a Menu by default and switches to a MenuDialog on smaller screens.

import { Button, MenuItem, MenuButton } from '@chakra-ui/react'
import { ResponsiveMenu, ResponsiveMenuList } from '@saas-ui-pro/react'


export default function App() {
  return (
    <ResponsiveMenu>
      <MenuButton as={Button}>Open menu</MenuButton>
      <ResponsiveMenuList>
        <MenuItem>Edit</MenuItem>
        <MenuItem>Delete</MenuItem>
      </ResponsiveMenuList>
    </ResponsiveMenu>
  )
}

Was this helpful?