All Downloads are FREE. Search and download functionalities are using the official Maven repository.

package.docs.components.MenuToggle.examples.MenuToggle.md Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation

Assets, source, tooling, and content for PatternFly 4

The newest version!

---
id: 'Menu toggle'
section: components
subsection: menus
cssPrefix: pf-v6-c-menu-toggle
---import './MenuToggle.css'

## Examples

### Collapsed

```html


```

### Expanded

```html


```

### Disabled

```html


```

### Count

```html


 


```

### Primary

```html


 


 


 


```

### Secondary

```html


 


 


 


```

### Plain

```html

 

 


```

### Plain with text

```html


 


 


```

### Small

```html

 

 


```

### Small with text

```html

 

 


```

### Split toggle with checkbox

```html

  
    
  
  

 

  
    
  
  

 

  
    
  
  


```

### Split toggle with labeled checkbox

To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in `span.pf-v6-c-check__label` as a child to `label.pf-v6-c-check`. Clicking the text will update the checked state of the split toggle's checkbox.

```html

  
    
    Select all items
  
  

 

  
    
    Select all items
  
  

 

  
    
    Select all items
  
  


```

### Split toggle with checkbox and toggle text

To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in `span.pf-v6-c-menu-toggle__text` as a child to `button.pf-v6-c-menu-toggle__button.pf-m-text`. Clicking the text should trigger any click action on the toggle.

```html

  
    
  
  
 

  
    
  
  
 

  
    
  
  


```

### Split button, primary

```html

  
    
    Select all items
  
  

 

  
    
    Select all items
  
  

 

  
    
    Select all items
  
  


```

### Split button, secondary

```html

  
    
    Select all items
  
  

 

  
    
    Select all items
  
  

 

  
    
    Select all items
  
  


```

### Split button (action)

```html

  
  

 

  
  

 

  
  


```

### Split button, primary (action)

```html

  
  

 

  
  

 

  
  


```

### Split button, secondary (action)

```html

  
  

 

  
  

 

  
  


```

### With icon/image and text

```html


 


```

### With avatar and text

```html


 


 


```

### Full height

```html


```

### Full width

```html


```

### Typeahead

```html

  
    
      
        
      
    
    
      
    
  
  


```

### Status

```html
















```

### Placeholder

```html


```

## Documentation

### Accessibility

| Class | Applied to | Outcome |
| -- | -- | -- |
| `aria-expanded="true"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
| `aria-expanded="false"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
| `aria-label="Descriptive text"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
| `disabled` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |

### Usage

| Class | Applied | Outcome |
| -- | -- | -- |
| `.pf-v6-c-menu-toggle` | `