## Feature Examples

### Structure
- description: Component consists of 2 containers: \- `title` - use it do display sub item's label. \- `children` - use it do display item's child actions.
- example:
```jsx
<StorybookComponents.Stack>
  <SidebarSubMenuNext title="Label">
    <SidebarItemNext>Child label</SidebarItemNext>
    <SidebarItemNext>Child label</SidebarItemNext>
  </SidebarSubMenuNext>
</StorybookComponents.Stack>;
```

### Suffix
- description: Add a counter badge or other indication after the item's label using `suffix` prop.
- example:
```jsx
<StorybookComponents.Stack>
  <SidebarSubMenuNext
    title="Parent label"
    suffix={<CounterBadge>1</CounterBadge>}
  >
    <SidebarItemNext>Child label</SidebarItemNext>
    <SidebarItemNext>Child label</SidebarItemNext>
  </SidebarSubMenuNext>
</StorybookComponents.Stack>;
```

### Disabled
- description: Control item's interaction with `disabled` prop. Disable item when it's unavailable, but has to remain visible.
- example:
```jsx
<StorybookComponents.Stack>
  <SidebarSubMenuNext title="Disabled" disabled>
    <SidebarItemNext>Child label</SidebarItemNext>
    <SidebarItemNext>Child label</SidebarItemNext>
  </SidebarSubMenuNext>
</StorybookComponents.Stack>;
```

## Developer Examples

### Custom HTML tag
- description: Render action as any given HTML tag with `as` prop. For example it can be rendered as: `<a>` - use when attributes like href, target, etc., are needed. `<Link>` - use this react router item to have props like to, replace, etc. All attributes will be passed to the rendered element. **Link works only if any of inner elements are NOT selected.**
- example:
```jsx
<StorybookComponents.Stack height="55px">
  <SidebarNext isLoading={false} selectedKey="0">
    <SidebarSubMenuNext
      title="Go to Wix.com"
      as="a"
      target="_blank"
      href="https://www.wix.com"
    >
      <SidebarItemNext>Child item</SidebarItemNext>
      <SidebarItemNext>Child item</SidebarItemNext>
    </SidebarSubMenuNext>
  </SidebarNext>
</StorybookComponents.Stack>;
```

### Setup selection with sidebar
- description: Control item selection from Sidebar component referring to `itemKey` set value. Truncate children item's text with `isInQuickNavigation` prop.
- example:
```jsx
() => {
  const [selectedKey, setSelectedKey] = React.useState('1-1');

  return (
    <Box height="200px">
      <SidebarNext isLoading={false} selectedKey={selectedKey}>
        <SidebarSubMenuNext
          title="Parent item"
          itemKey="1"
          onClick={() => setSelectedKey('1-1')}
        >
          <SidebarItemNext
            itemKey="1-1"
            onClick={() => {
              setSelectedKey('1-1');
            }}
            isInQuickNavigation
          >
            Child item with a long label to show its ellipsis
          </SidebarItemNext>
          <SidebarItemNext
            itemKey="1-2"
            onClick={() => setSelectedKey('1-2')}
            isInQuickNavigation
          >
            Child item using isInQuickNavigation property preveting from text
            being wrapped
          </SidebarItemNext>
        </SidebarSubMenuNext>
      </SidebarNext>
    </Box>
  );
};
```

## Common Use Case Examples

### Navigating between items
- description: Redirect `<SidebarSubMenuNext/>` selection to its first child when clicked. It helps a user to understand sidebar's hierarchy and navigate between the items easily.
- example:
```jsx
() => {
  const [selectedKey, setSelectedKey] = React.useState('3-1');

  return (
    <StorybookComponents.Stack height="384px">
      <SidebarNext selectedKey={selectedKey} isLoading={false}>
        <SidebarSubMenuNext
          title="Contacts"
          itemKey="3"
          onClick={() => setSelectedKey('3-1')}
        >
          <SidebarItemNext itemKey="3-1" onClick={() => setSelectedKey('3-1')}>
            Contacts
          </SidebarItemNext>
          <SidebarItemNext itemKey="3-2" onClick={() => setSelectedKey('3-2')}>
            Segments
          </SidebarItemNext>
          <SidebarItemNext itemKey="3-3" onClick={() => setSelectedKey('3-3')}>
            Site Members
          </SidebarItemNext>
          <SidebarItemNext itemKey="3-4" onClick={() => setSelectedKey('3-4')}>
            Workflows
          </SidebarItemNext>
        </SidebarSubMenuNext>
        <SidebarSubMenuNext
          title="Communications"
          itemKey="3"
          onClick={() => setSelectedKey('4-1')}
        >
          <SidebarItemNext itemKey="4-1" onClick={() => setSelectedKey('4-1')}>
            Inbox
          </SidebarItemNext>
          <SidebarItemNext itemKey="4-2" onClick={() => setSelectedKey('4-2')}>
            Chat
          </SidebarItemNext>
          <SidebarItemNext itemKey="4-3" onClick={() => setSelectedKey('4-3')}>
            Forms & Submissions
          </SidebarItemNext>
          <SidebarItemNext itemKey="4-4" onClick={() => setSelectedKey('4-4')}>
            Business Email
          </SidebarItemNext>
        </SidebarSubMenuNext>
      </SidebarNext>
    </StorybookComponents.Stack>
  );
};
```