## Feature Examples

### Suffix
- description: Add a counter badge or other indication after the item's label using `suffix` prop.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SidebarItemNext suffix={<CounterBadge>1</CounterBadge>}>
    Label
  </SidebarItemNext>
  <SidebarItemNext suffix={<Badge skin="warning">New</Badge>}>
    Label
  </SidebarItemNext>
</StorybookComponents.Stack>;
```

### Minimized
- description: An item normally takes its minimized state from the parent sidebar. Set `minimized` to render the collapsed, icon-only form regardless. It is the escape hatch for an item rendered across a bundle boundary, where the sidebar context does not resolve. The prop hides the label; the rail width still comes from the container, so place the item in a narrow one to get the collapsed look. Always pair it with `minimizedTooltipContent`, because once the label is hidden the tooltip is the only thing naming the item. An item with no `prefix` renders nothing at all when minimized.
- example:
```jsx
<StorybookComponents.Stack>
  <Box direction="vertical" gap="6px">
    <Text size="tiny" secondary>
      Expanded
    </Text>
    <Box width="220px" direction="vertical">
      <SidebarItemNext prefix={<Icons.Dashboard />}>Dashboard</SidebarItemNext>
      <SidebarItemNext prefix={<Icons.Settings />}>Settings</SidebarItemNext>
    </Box>
  </Box>
  <Box direction="vertical" gap="6px">
    <Text size="tiny" secondary>
      Minimized
    </Text>
    <Box width="48px" direction="vertical">
      <SidebarItemNext
        minimized
        prefix={<Icons.Dashboard />}
        minimizedTooltipContent="Dashboard"
      >
        Dashboard
      </SidebarItemNext>
      <SidebarItemNext
        minimized
        prefix={<Icons.Settings />}
        minimizedTooltipContent="Settings"
      >
        Settings
      </SidebarItemNext>
    </Box>
  </Box>
</StorybookComponents.Stack>;
```

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

## 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.
- example:
```jsx
<SidebarItemNext as="a" href="https://www.wix.com">
  Wix.com homepage
</SidebarItemNext>;
```

### 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');
            }}
          >
            Child item that's setup incorrectly, it allows text wrapping{' '}
          </SidebarItemNext>
          <SidebarItemNext
            itemKey="1-2"
            onClick={() => setSelectedKey('1-2')}
            isInQuickNavigation
          >
            Child item using isInQuickNavigation property preveting from text
            being wrapped
          </SidebarItemNext>
        </SidebarSubMenuNext>
      </SidebarNext>
    </Box>
  );
};
```