Storybook
  
  
    - 
    
      
        
Theme
 - 
  
  
    
      Light
 - 
  
  
    
      Dark
 - 
  
  
    
      System
 - 
    
      
        
Light tone
 - 
  
  
    
      Light
 - 
  
  
    
      Light high contrast
 - 
  
  
    
      Light colorblind
 - 
  
  
    
      Light Tritanopia
 - 
    
      
        
Dark tone
 - 
  
  
    
      Dark
 - 
  
  
    
      Dark dimmed
 - 
  
  
    
      Dark high contrast
 - 
  
  
    
      Dark colorblind
 - 
  
  
    
      Dark Tritanopia
 - 
  
  
    
      Reset to default
 
- Introduction
 - 
    
      
        
Components
 - Action list
 - Action menu
 - Alert
 - Avatar
 - Blankslate
 - Box
 - Branch name
 - Breadcrumb
 - Button
 - Button group
 - Checkbox
 - Checkbox group
 - Circle badge
 - Counter
 - Dialog
 - Drawer
 - Dropdown
 - Ellipsis
 - Filter list
 - Header
 - Input validation message
 - Label
 - Layout
 - Link
 - Menu
 - Octicon
 - Pagination
 - Progress
 - Radio button
 - Radio group
 - Radio tabs
 - Select
 - Select menu
 - Side nav
 - Spinner
 - State label
 - Styled HTML
 - Subhead
 - Subnav
 - Tabnav
 - Text input
 - Textarea
 - Theme
 - Theme menu
 - Theme menu options
 - Timeline
 - Toggle switch
 - Truncate
 - Underline nav
 - Scoped
 
Drawer
  
    Generates a drawer with configuration options for backdrop, position and behavior.
  
          
        
  
  
    - 
    
      
        
Documentation
 - drawer
 
Basic
  Content
  Content
  Content
  Content
  Content
  Last
Content width
  Content
  Content
  Content
  Content
  Content
  Last
Open at far side
  Content
  Content
  Content
  Content
  Content
  Last
Backdrop
  Content
  Content
  Content
  Content
  Content
  Last
Light backdrop, fast
  Content
  Content
  Content
  Content
  Content
  Last
Transition duration
  Content
  Content
  Content
  Content
  Content
  Last
Modal drawer
  Content
  Content
  Content
  Content
  Content
  Last
Modal drawer, not escapable
  Content
  Content
  Content
  Content
  Content
  Last
Focus specific element after opening
Focus originating button after closing
  Content
  Content
  Content
  Content
  Content
  Last
Local drawer
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis
qui facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum
clari, fiant sollemnes in futurum.
  
  
  Content
  Content
  Content
  Content
  Content
  Last
Push drawer
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
congue nihil imperdiet doming id quod mazim placerat facer possim
assum. Typi non habent claritatem insitam; est usus legentis in iis
qui facit eorum claritatem. Investigationes demonstraverunt lectores
legere me lius quod ii legunt saepius. Claritas est etiam processus
dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est
notare quam littera gothica, quam nunc putamus parum claram,
anteposuerit litterarum formas humanitatis per seacula quarta decima
et quinta decima. Eodem modo typi, qui nunc nobis videntur parum
clari, fiant sollemnes in futurum.
    
    
    
      
  Content
  Content
  Content
  Content
  Content
  Last
Navigation drawer
  
  This drawer is persisted across LiveViews, using the URL to keep store the drawer's 
  
  show_state. The Drawer hook scrolls the anchored sections into view.
    
  
    
  Open
  
  
    
      
    
    
  
  
    
    
  
    
      
        
  
  
          
    
      
    
  
  
  
    - 
    
      
        
Stories
 - Basic
 - Backdrop
 - Keeping form state
 
Keeping form state
  Selected: -
  
  - 
    
      
        
On this page
 - Top of page
 - Documentation
 - 
    
      
        
Stories
 - Basic
 - Content width
 - Open at far side
 - Backdrop
 - Light backdrop, fast
 - Transition duration
 - Modal drawer
 - Modal drawer, not escapable
 - Focus specific element after opening
 - Focus originating button after closing
 - Local drawer
 - Push drawer
 - Navigation drawer
 - Keeping form state
 - Top of page
 
- Introduction
 - 
    
      
        
Components
 - Action list
 - Action menu
 - Alert
 - Avatar
 - Blankslate
 - Box
 - Branch name
 - Breadcrumb
 - Button
 - Button group
 - Checkbox
 - Checkbox group
 - Circle badge
 - Counter
 - Dialog
 - Drawer
 - 
  
  
    
      
 - Dropdown
 - Ellipsis
 - Filter list
 - Header
 - Input validation message
 - Label
 - Layout
 - Link
 - Menu
 - Octicon
 - Pagination
 - Progress
 - Radio button
 - Radio group
 - Radio tabs
 - Select
 - Select menu
 - Side nav
 - Spinner
 - State label
 - Styled HTML
 - Subhead
 - Subnav
 - Tabnav
 - Text input
 - Textarea
 - Theme
 - Theme menu
 - Theme menu options
 - Timeline
 - Toggle switch
 - Truncate
 - Underline nav
 - Scoped