skip to main content
skip to navigation sidebar
skip to context sidebar
A pack of extensions for grommet 2
Edit this page
created:7/7/2021
updated:7/7/2021
loc
61
comments
13%
passed
4
failed
4
coverage
75%

Sidebar

avatar of atanasster
grommet-controls
3.0.2

Collapsible side bar component 

$ npm install grommet-controlsimport { Sidebar } from 'grommet-controls';<Sidebar title='My title'>   ...</Sidebar>

Component

browse
docs
issues
import { Sidebar } from 'grommet-controls';

Collapsible

title

Side item
browse
docs
issues
() => (
  <Sidebar
    title="title"
    border={{ size: 'small' }}
    width="small"
    basis="small"
    collapsible={false}
  >
    <Text>Side item</Text>
  </Sidebar>
)

Properties

Name
Description
Default
ISidebarProps(4 properties)
title

Title string or any react node

ReactNode
undefined
width

The width of the side bar

string & WidthType
medium
collapsible

Whether the sidebar can be collapsed

boolean
true
children

children content elements to be displayed in Sidebar

ReactNode
-
BoxProps(27 properties)

Commits

Date
Author
Commit Message
8/30/2020

atanasster

avatar of atanasster
update eslint and add component-controls
8/29/2019

atanasster

avatar of atanasster
stories cleanup, welcome page.mdx
8/27/2019

atanasster

avatar of atanasster
initial commit 2.x alpha
3 commits

External dependencies

package
imports
peer
grommet
^2.15.0
ResponsiveContextHeadingButtonBoxPropsBox
*
grommet-icons/icons/Menu
^2.15.0
Menu
*
react
^17.0.1
React
*

Internal dependencies

file
imports
"./SidebarProps"
ISidebarProps

Component JSX

<Button
icononClick
>
grommet
^2.15.0
<Menu
/>
grommet-icons/icons/Menu
^2.15.0
<ResponsiveContext.Consumer
>
grommet
^2.15.0
<Box
align
>
grommet
^2.15.0
<BtnToggle
view
/>
BtnToggle
<Box
width
>
grommet
^2.15.0

Stories

Main

My title

Side item
browse
docs
issues
() => (
  <Box align="center">
    <Sidebar
      title="My title"
      border={{ size: 'small' }}
      width="small"
      basis="small"
    >
      <Text>Side item</Text>
    </Sidebar>
  </Box>
)

Title

title

Side item
browse
docs
issues
() => (
  <Sidebar title="title" border={{ size: 'small' }} width="small" basis="small">
    <Text>Side item</Text>
  </Sidebar>
)

Width

title

Side item
browse
docs
issues
() => (
  <Sidebar
    title="title"
    border={{ size: 'small' }}
    width="medium"
    basis="small"
  >
    <Text>Side item</Text>
  </Sidebar>
)
Previous
layout/Header
Next
navigation/VerticalMenu