## Feature Examples
### Structure
- description: This component consists of 3 containers:
- header - use it to display application name or to reflect application setup progress.
- children - use it to list all navigation elements linking to all major application pages.
- footer - use it for a special call to action.
Header and footer containers are always sticky.
- example:
```jsx
() => {
const placeholder = (children, height) => (
{children}
);
return (
{placeholder('Children', '120px')}
);
};
```
### Skin
- description: Control the sidebar's style with skin prop:
- dark (default) - used in Business Manager application.
- light - used in My Account application.
- neutral - used in Media Manager.
- example:
```jsx
Dark option 1
Dark option 2
Light option 1
Light option 2
Neutral option 1
Neutral option 2
;
```
### Skeleton
- description: Toggle component's loading state with isLoading prop. Prop's default value is true.
- example:
```jsx
Header
}
footer={
Footer
}
/>
;
```
## Developer Examples
### Control selected state
- description: Control which sidebar option is selected by passing a key number with selectedKey prop in
Specify each sidebar option's key number with itemKey prop in
- example:
```jsx
() => {
const [selectedKey, setSelectedKey] = React.useState('2');
return (
setSelectedKey('1')}>
Option 1
setSelectedKey('2')}>
Option 2
setSelectedKey('3')}>
Option 3
);
}
```
### Toggle sidebar's visibility
- description: Set the sidebar as visible or hidden using hidden prop.
- example:
```jsx
() => {
const [selectedKey, setSelectedKey] = React.useState('1');
const [hidden, setHidden] = React.useState(false);
return (
Children
);
};
```
## Common Use Case Examples
### Sidebar in composer application
- description: Some applications like many Wix composers require a lot of horizontal space to make the app effective.
Therefore it's allowed to add an additional action in the composer header allowing to toggle sidebar's visibility.
- example:
```jsx
() => {
const [selectedKey, setSelectedKey] = React.useState('5')
const [hidden, setHidden] = React.useState(false)
return (
}
>
View all steps
}
>
}
footer={
}
>
Quick Access
}
>
setSelectedKey('1')}>
Home
setSelectedKey('2')}>
Activity
setSelectedKey('3-1')}
>
setSelectedKey('3-1')}
>
Contacts
setSelectedKey('3-2')}
>
Segments
setSelectedKey('3-3')}
>
Site Members
setSelectedKey('3-4')}
>
Workflows
setSelectedKey('4')}>
Communications
setSelectedKey('5')}>
Automations
setSelectedKey('6')}>
Settings
) : (
)
}
onClick={() => setHidden(!hidden)}
>
{!hidden ? 'Hide sidebar' : 'Show sidebar'}
Page content
)
}
```