diff --git a/CHANGELOG.md b/CHANGELOG.md
index c5da183949..c639058b3d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -45,6 +45,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add prototype for expandable control messages in `Chat` @sophieH29 ([#1765](https://github.com/stardust-ui/react/pull/1765))
 - Remove Font Awesome icons from docs examples @lucivpav ([#1764](https://github.com/stardust-ui/react/pull/1764))
 - Improve QuickStart code example @lucivpav ([#1797](https://github.com/stardust-ui/react/pull/1797))
+- Implement component tab UI @lucivpav ([#1784](https://github.com/stardust-ui/react/pull/1784))
 
 <!--------------------------------[ v0.36.2 ]------------------------------- -->
 ## [v0.36.2](https://github.com/stardust-ui/react/tree/v0.36.1) (2019-08-19)
diff --git a/docs/src/components/ComponentDoc/ComponentBestPractices.tsx b/docs/src/components/ComponentDoc/ComponentBestPractices.tsx
new file mode 100644
index 0000000000..76a56b27c3
--- /dev/null
+++ b/docs/src/components/ComponentDoc/ComponentBestPractices.tsx
@@ -0,0 +1,40 @@
+import * as _ from 'lodash'
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+
+import { exampleBestPracticesContext } from 'docs/src/utils'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+interface ComponentBestPracticesProps {
+  displayName: string
+}
+
+export default class ComponentBestPractices extends React.Component<
+  ComponentBestPracticesProps,
+  any
+> {
+  static propTypes = {
+    displayName: PropTypes.string.isRequired,
+  }
+
+  render() {
+    const { displayName } = this.props
+
+    const bestPracticesPath = _.find(exampleBestPracticesContext.keys(), path =>
+      new RegExp(`\/${displayName}\/BestPractices\/${displayName}BestPractices\.tsx$`).test(path),
+    )
+
+    if (!bestPracticesPath) {
+      return null
+    }
+
+    const bestPracticesElement = React.createElement(
+      exampleBestPracticesContext(bestPracticesPath).default,
+    ) as any
+    if (!bestPracticesElement) {
+      return null
+    }
+
+    return <ExampleSection title="Best Practices">{bestPracticesElement}</ExampleSection>
+  }
+}
diff --git a/docs/src/components/ComponentDoc/ComponentDoc.tsx b/docs/src/components/ComponentDoc/ComponentDoc.tsx
index ff88afd532..f8dc190e48 100644
--- a/docs/src/components/ComponentDoc/ComponentDoc.tsx
+++ b/docs/src/components/ComponentDoc/ComponentDoc.tsx
@@ -1,17 +1,21 @@
 import * as React from 'react'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
-import { Flex, Header, Icon, Dropdown, Text, Grid } from '@stardust-ui/react'
+import { Flex, Header, Icon, Dropdown, Text, Grid, Menu, Box } from '@stardust-ui/react'
 
-import { scrollToAnchor, examplePathToHash, getFormattedHash } from 'docs/src/utils'
+import { getFormattedHash } from 'docs/src/utils'
 import ComponentDocLinks from './ComponentDocLinks'
 import ComponentDocSee from './ComponentDocSee'
-import ComponentExamples from './ComponentExamples'
+import { ComponentExamples } from './ComponentExamples'
+import { ComponentUsage } from './ComponentUsage'
 import ComponentProps from './ComponentProps'
-import ComponentAccessibility from './ComponentDocAccessibility'
+import { ComponentDocAccessibility } from './ComponentDocAccessibility'
 import { ThemeContext } from 'docs/src/context/ThemeContext'
 import ExampleContext from 'docs/src/context/ExampleContext'
 import ComponentPlayground from 'docs/src/components/ComponentPlayground/ComponentPlayground'
 import { ComponentInfo } from 'docs/src/types'
+import ComponentBestPractices from './ComponentBestPractices'
+import { tabListBehavior } from 'src/lib/accessibility'
+import * as _ from 'lodash'
 
 const exampleEndStyle: React.CSSProperties = {
   textAlign: 'center',
@@ -21,22 +25,51 @@ const exampleEndStyle: React.CSSProperties = {
 
 type ComponentDocProps = {
   info: ComponentInfo
+  tabs: string[]
 } & RouteComponentProps<{}>
 
 class ComponentDoc extends React.Component<ComponentDocProps, any> {
   state: any = {}
 
+  tabRegex = new RegExp(/[^\/]*$/)
+
+  getTabIndexOrRedirectToDefault(tab: string) {
+    const lowercaseTabs = _.map(this.props.tabs, tab => tab.toLowerCase())
+    const index = lowercaseTabs.indexOf(tab)
+    if (index === -1) {
+      const { history, location } = this.props
+      const at = location.pathname
+      const newLocation = at.replace(this.tabRegex, 'definition')
+      history.replace(newLocation)
+      return 0
+    }
+    return index
+  }
+
+  getCurrentTabTitle() {
+    return this.props.tabs[this.state.currentTabIndex]
+  }
+
   componentWillMount() {
     const { history, location } = this.props
+    const tab = location.pathname.match(this.tabRegex)[0]
+    const tabIndex = this.getTabIndexOrRedirectToDefault(tab)
+    this.setState({ currentTabIndex: tabIndex })
 
     if (location.hash) {
       const activePath = getFormattedHash(location.hash)
       history.replace(`${location.pathname}#${activePath}`)
       this.setState({ activePath })
+      if (this.props.tabs[tabIndex] === 'Props') {
+        this.setState({ defaultPropComponent: activePath })
+      }
     }
   }
 
-  componentWillReceiveProps({ info }) {
+  componentWillReceiveProps({ info, location }) {
+    const tab = location.pathname.match(this.tabRegex)[0]
+    this.setState({ currentTabIndex: this.getTabIndexOrRedirectToDefault(tab) })
+
     if (info.displayName !== this.props.info.displayName) {
       this.setState({ activePath: undefined })
     }
@@ -48,6 +81,7 @@ class ComponentDoc extends React.Component<ComponentDocProps, any> {
 
   handleExamplesRef = examplesRef => this.setState({ examplesRef })
 
+  /* TODO: bring back the right floating menu
   handleSidebarItemClick = (e, { examplePath }) => {
     const { history, location } = this.props
     const activePath = examplePathToHash(examplePath)
@@ -56,6 +90,22 @@ class ComponentDoc extends React.Component<ComponentDocProps, any> {
     // set active hash path
     this.setState({ activePath }, scrollToAnchor)
   }
+  */
+
+  handleTabClick = (e, props) => {
+    const newIndex = props.index
+    const { history, location } = this.props
+    const at = location.pathname
+    const newLocation = at.replace(this.tabRegex, this.props.tabs[newIndex].toLowerCase())
+
+    history.replace(newLocation)
+    this.setState({ currentTabIndex: newIndex })
+  }
+
+  onPropComponentSelected = (e, props) => {
+    const { history, location } = this.props
+    history.replace(`${location.pathname}#${props.value}`)
+  }
 
   render() {
     const getA11ySelectionMessage = {
@@ -124,33 +174,74 @@ class ComponentDoc extends React.Component<ComponentDocProps, any> {
                   />
                 </Flex.Item>
               </Flex>
-              <Text styles={{ marginBottom: '1.4rem' }} content={info.docblock.description} />
-              <ComponentAccessibility info={info} />
+              <Menu
+                underlined
+                primary
+                defaultActiveIndex={0}
+                activeIndex={this.state.currentTabIndex}
+                items={this.props.tabs}
+                onItemClick={this.handleTabClick}
+                accessibility={tabListBehavior}
+              />
               <ComponentDocSee displayName={info.displayName} />
-              <ComponentProps displayName={info.displayName} props={info.props} />
             </>
           </Flex.Item>
         </Flex>
 
-        <ComponentPlayground componentName={info.displayName} key={info.displayName} />
+        {this.getCurrentTabTitle() === 'Accessibility' && <ComponentDocAccessibility info={info} />}
+
+        {this.getCurrentTabTitle() === 'Props' && (
+          <ComponentProps
+            displayName={info.displayName}
+            props={info.props}
+            defaultComponentProp={this.state.defaultPropComponent}
+            onPropComponentSelected={this.onPropComponentSelected}
+          />
+        )}
 
-        <Grid columns="auto 300px" styles={{ justifyContent: 'normal', justifyItems: 'stretch' }}>
-          <div ref={this.handleExamplesRef}>
-            <ExampleContext.Provider
-              value={{
-                activeAnchorName: activePath,
-                onExamplePassed: this.handleExamplePassed,
-              }}
+        {this.getCurrentTabTitle() === 'Definition' && (
+          <>
+            <Text
+              size="large"
+              styles={{ marginBottom: '1.4rem' }}
+              content={info.docblock.description}
+            />
+            <Box styles={{ height: '10px' }} />
+            <ComponentPlayground componentName={info.displayName} key={info.displayName} />
+            <Grid
+              columns="auto 300px"
+              styles={{ justifyContent: 'normal', justifyItems: 'stretch' }}
             >
-              <ComponentExamples displayName={info.displayName} />
-            </ExampleContext.Provider>
+              <div>
+                <ComponentBestPractices displayName={info.displayName} />
+                <div ref={this.handleExamplesRef}>
+                  <ExampleContext.Provider
+                    value={{
+                      activeAnchorName: activePath,
+                      onExamplePassed: this.handleExamplePassed,
+                    }}
+                  >
+                    <ComponentExamples displayName={info.displayName} />
+                  </ExampleContext.Provider>
+                </div>
+              </div>
+            </Grid>
+          </>
+        )}
 
-            <div style={exampleEndStyle}>
-              This is the bottom <Icon name="pointing down" />
+        {this.getCurrentTabTitle() === 'Usage' && (
+          <Grid columns="auto 300px" styles={{ justifyContent: 'normal', justifyItems: 'stretch' }}>
+            <div>
+              <ExampleContext.Provider
+                value={{
+                  activeAnchorName: activePath,
+                  onExamplePassed: this.handleExamplePassed,
+                }}
+              >
+                <ComponentUsage displayName={info.displayName} />
+              </ExampleContext.Provider>
             </div>
-          </div>
-
-          {/* TODO: bring back the right floating menu
+            {/* TODO: bring back the right floating menu
             <Box styles={{ width: '25%', paddingLeft: '14px' }}>
               <ComponentSidebar
                 activePath={activePath}
@@ -160,7 +251,12 @@ class ComponentDoc extends React.Component<ComponentDocProps, any> {
               />
             </Box>
           */}
-        </Grid>
+          </Grid>
+        )}
+
+        <div style={exampleEndStyle}>
+          This is the bottom <Icon name="pointing down" />
+        </div>
       </div>
     )
   }
diff --git a/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx b/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
index 7618d48965..99beca6bf9 100644
--- a/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
+++ b/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
@@ -1,21 +1,37 @@
 import * as React from 'react'
 import * as _ from 'lodash'
-import { Flex, Loader, Text, Accordion } from '@stardust-ui/react'
+import { Flex, Loader, Text, Provider } from '@stardust-ui/react'
 
 const InlineMarkdown = React.lazy(() => import('./InlineMarkdown'))
 
 const behaviorMenu = require('docs/src/behaviorMenu')
 
-const ComponentDocAccessibility = ({ info }) => {
-  const description = _.get(_.find(info.docblock.tags, { title: 'accessibility' }), 'description')
+export function containsAccessibility(info) {
+  const stem = getStem(info)
+  return !!getDescription(info) || !!getBehaviorName(stem)
+}
+
+function getDescription(info) {
+  return _.get(_.find(info.docblock.tags, { title: 'accessibility' }), 'description')
+}
+
+function getStem(info) {
   const defaultValue = _.get(_.find(info.props, { name: 'accessibility' }), 'defaultValue')
+  return defaultValue && defaultValue.split('.').pop()
+}
 
-  const stem = defaultValue && defaultValue.split('.').pop()
+function getBehaviorName(stem) {
   const filename = stem && `${stem}.ts`
 
-  const behaviorName = behaviorMenu.reduce((acc, next) => {
+  return behaviorMenu.reduce((acc, next) => {
     return _.find(next.variations, { name: filename }) ? next.displayName : acc
   }, null)
+}
+
+export const ComponentDocAccessibility = ({ info }) => {
+  const stem = getStem(info)
+  const description = getDescription(info)
+  const behaviorName = getBehaviorName(stem)
 
   if (!behaviorName && !description) return null
 
@@ -57,28 +73,13 @@ const ComponentDocAccessibility = ({ info }) => {
     </>
   )
 
-  const accessPanels = [
-    {
-      key: 'accessibility',
-      content: { content: accessibilityDetails, styles: { paddingLeft: '14px' } },
-      title: {
-        content: <Text content="Accessibility" />,
-        as: 'span',
-        'aria-level': '2',
-        styles: { paddingBottom: '0', paddingTop: '0' },
-      },
-    },
-  ]
-
   return (
     <Flex column>
       <Flex.Item>
-        <>
-          <Accordion panels={accessPanels} />
-        </>
+        <Provider styles={{ paddingLeft: '14px', background: 'transparent' }}>
+          {accessibilityDetails}
+        </Provider>
       </Flex.Item>
     </Flex>
   )
 }
-
-export default ComponentDocAccessibility
diff --git a/docs/src/components/ComponentDoc/ComponentExamples.tsx b/docs/src/components/ComponentDoc/ComponentExamples.tsx
index c8aa13ed32..900e2b7e1e 100644
--- a/docs/src/components/ComponentDoc/ComponentExamples.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExamples.tsx
@@ -12,7 +12,24 @@ interface ComponentExamplesProps {
   displayName: string
 }
 
-export default class ComponentExamples extends React.Component<ComponentExamplesProps, any> {
+function getExamplesElement(displayName: string) {
+  // rule #1
+  const indexPath = _.find(exampleIndexContext.keys(), path =>
+    new RegExp(`\/${displayName}\/index\.tsx$`).test(path),
+  )
+  if (!indexPath) {
+    return null
+  }
+
+  const ExamplesElement = React.createElement(exampleIndexContext(indexPath).default) as any
+  if (!ExamplesElement) {
+    return null
+  }
+
+  return ExamplesElement
+}
+
+export class ComponentExamples extends React.Component<ComponentExamplesProps, any> {
   static propTypes = {
     displayName: PropTypes.string.isRequired,
   }
@@ -23,29 +40,21 @@ export default class ComponentExamples extends React.Component<ComponentExamples
 
   /**
    * RULES for a component with displayName=MyComponent:
-   * 1. create a file at ./docs/src/components/MyComponent/index.tsx referencing all MyComponent examples
+   * 1. create a file at ./docs/src/examples/components/MyComponent/index.tsx referencing all MyComponent examples (except for Usage examples)
    * 2. all example file names must contain the word 'Example'; e.g.: MyComponentExampleCircular.tsx
-   * 3. all example files must be under ./docs/src/components/MyComponent path; e.g.: ./docs/src/components/MyComponent/SomeType/SomeExample.tsx
-   * 2. for every ./docs/src/components/{...}/{...}MyComponent{...}Example{...}.tsx there needs to be a shorthand version of it:
-   *              ./docs/src/components/{...}/{...}MyComponent{...}Example{...}.shorthand.tsx
+   * 3. all example files must be under ./docs/src/examples/components/MyComponent path; e.g.: ./docs/src/examples/components/MyComponent/SomeType/SomeExample.tsx
+   * 4. for every ./docs/src/examples/components/{...}/{...}MyComponent{...}Example{...}.tsx there needs to be a shorthand version of it:
+   *              ./docs/src/examples/components/{...}/{...}MyComponent{...}Example{...}.shorthand.tsx
    */
   renderExamples = (): JSX.Element | null => {
     const { displayName } = this.props
 
-    // rule #1
-    const indexPath = _.find(exampleIndexContext.keys(), path =>
-      new RegExp(`\/${displayName}\/index\.tsx$`).test(path),
-    )
-    if (!indexPath) {
-      return null
-    }
-
-    const ExamplesElement = React.createElement(exampleIndexContext(indexPath).default) as any
+    const ExamplesElement = getExamplesElement(displayName)
     if (!ExamplesElement) {
       return null
     }
 
-    // rules #2 and #3
+    // rules #3 and #4
     const missingPaths = this.getMissingExamplePaths(displayName, exampleSourcesContext.keys())
     return missingPaths && missingPaths.length ? (
       <div>
diff --git a/docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx b/docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx
index da59ef9873..9279eaf686 100644
--- a/docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx
+++ b/docs/src/components/ComponentDoc/ComponentProps/ComponentProps.tsx
@@ -6,7 +6,7 @@ import { getComponentGroup } from 'docs/src/utils'
 import ComponentTableProps from '../ComponentPropsTable'
 import ComponentPropsComponents from './ComponentPropsComponents'
 import ComponentPropsDescription from './ComponentPropsDescription'
-import { ICSSInJSStyle, Flex, Checkbox } from '@stardust-ui/react'
+import { ICSSInJSStyle, Flex } from '@stardust-ui/react'
 
 const propsContainerStyle: ICSSInJSStyle = { overflowX: 'auto' }
 
@@ -14,12 +14,17 @@ export default class ComponentProps extends React.Component<any, any> {
   static propTypes = {
     displayName: PropTypes.string.isRequired,
     props: PropTypes.arrayOf(PropTypes.object).isRequired,
+    defaultComponentProp: PropTypes.string,
+    onPropComponentSelected: PropTypes.func,
   }
 
   componentWillMount() {
-    const { displayName } = this.props
+    const { displayName, defaultComponentProp } = this.props
 
-    this.setState({ componentGroup: getComponentGroup(displayName) })
+    this.setState({
+      componentGroup: getComponentGroup(displayName),
+      activeDisplayName: defaultComponentProp || displayName,
+    })
   }
 
   componentWillReceiveProps({ displayName: next }) {
@@ -33,15 +38,9 @@ export default class ComponentProps extends React.Component<any, any> {
     }
   }
 
-  handleComponentClick = (e, { name }) => {
-    this.setState({ activeDisplayName: name })
-  }
-
-  handleToggle = () => {
-    const { displayName } = this.props
-    const { activeDisplayName } = this.state
-
-    this.setState({ activeDisplayName: activeDisplayName ? false : displayName })
+  handleSelectedChange = (e, props) => {
+    this.setState({ activeDisplayName: props.value })
+    _.invoke(this.props, 'onPropComponentSelected', e, props)
   }
 
   render() {
@@ -55,11 +54,10 @@ export default class ComponentProps extends React.Component<any, any> {
       <Flex column gap="gap.small">
         <Flex.Item styles={{ display: 'block', verticalAlign: 'middle' }}>
           <Flex gap="gap.medium">
-            <Checkbox checked={!!activeDisplayName} onChange={this.handleToggle} label="Props" />
             <ComponentPropsComponents
               activeDisplayName={activeDisplayName}
               displayNames={displayNames}
-              onItemClick={this.handleComponentClick}
+              onSelectedChange={this.handleSelectedChange}
               parentDisplayName={displayName}
             />
           </Flex>
diff --git a/docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponents.tsx b/docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponents.tsx
index c019f1c94f..4f228f8104 100644
--- a/docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponents.tsx
+++ b/docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponents.tsx
@@ -1,36 +1,30 @@
 import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import { Menu, tabListBehavior } from '@stardust-ui/react'
+import { Dropdown, Header, Flex } from '@stardust-ui/react'
 
 const ComponentPropsComponents: any = ({
   activeDisplayName,
   displayNames,
-  onItemClick,
+  onSelectedChange,
   parentDisplayName,
 }) => {
   if (displayNames.length < 2) return null
 
-  const items: Object[] = _.map(displayNames, displayName => ({
-    key: displayName,
-    active: activeDisplayName === displayName,
-    content:
-      displayName === parentDisplayName
-        ? displayName
-        : displayName.replace(parentDisplayName, `${parentDisplayName}.`),
-    name: displayName,
-    onClick: onItemClick,
-    styles: { paddingTop: '0px' },
-  }))
-
+  const items: Object[] = _.map(displayNames, displayName =>
+    displayName === parentDisplayName
+      ? displayName
+      : displayName.replace(parentDisplayName, `${parentDisplayName}`),
+  )
   return (
-    <Menu
-      styles={{ display: 'inline-flex', borderBottomWidth: '0px' }}
-      primary
-      underlined
-      accessibility={tabListBehavior}
-      items={items}
-    />
+    <Flex column>
+      <Header as="h3">Component:</Header>
+      <Dropdown
+        items={items}
+        defaultValue={activeDisplayName}
+        onSelectedChange={onSelectedChange}
+      />
+    </Flex>
   )
 }
 
diff --git a/docs/src/components/ComponentDoc/ComponentUsage.tsx b/docs/src/components/ComponentDoc/ComponentUsage.tsx
new file mode 100755
index 0000000000..864a6b069b
--- /dev/null
+++ b/docs/src/components/ComponentDoc/ComponentUsage.tsx
@@ -0,0 +1,45 @@
+import * as PropTypes from 'prop-types'
+import * as React from 'react'
+import * as _ from 'lodash'
+
+import { usageIndexContext } from 'docs/src/utils'
+
+interface ComponentUsageProps {
+  displayName: string
+}
+
+export function containsUsage(displayName: string) {
+  return !!getUsageElement(displayName)
+}
+
+function getUsageElement(displayName: string) {
+  const indexPath = _.find(usageIndexContext.keys(), path =>
+    new RegExp(`\/${displayName}\/Usage\/index\.tsx$`).test(path),
+  )
+  if (!indexPath) {
+    return null
+  }
+
+  const UsageElement = React.createElement(usageIndexContext(indexPath).default) as any
+  if (!UsageElement) {
+    return null
+  }
+
+  return UsageElement
+}
+
+export class ComponentUsage extends React.Component<ComponentUsageProps, any> {
+  static propTypes = {
+    displayName: PropTypes.string.isRequired,
+  }
+
+  render() {
+    const { displayName } = this.props
+    const UsageElement = getUsageElement(displayName)
+    if (!UsageElement) {
+      return null
+    }
+
+    return UsageElement
+  }
+}
diff --git a/docs/src/components/DocsRoot.tsx b/docs/src/components/DocsRoot.tsx
index 7bf1f82820..d0e1097eab 100644
--- a/docs/src/components/DocsRoot.tsx
+++ b/docs/src/components/DocsRoot.tsx
@@ -5,7 +5,8 @@ import * as React from 'react'
 import ComponentDoc from '../components/ComponentDoc'
 import PageNotFound from '../views/PageNotFound'
 import componentInfoContext from '../utils/componentInfoContext'
-import DocsBehaviorRoot from './DocsBehaviorRoot'
+import { containsUsage } from './ComponentDoc/ComponentUsage'
+import { containsAccessibility } from './ComponentDoc/ComponentDocAccessibility'
 
 class DocsRoot extends React.Component<any, any> {
   static propTypes = {
@@ -13,22 +14,39 @@ class DocsRoot extends React.Component<any, any> {
     match: PropTypes.shape({
       params: PropTypes.shape({
         name: PropTypes.string.isRequired,
-        type: PropTypes.string.isRequired,
+        tab: PropTypes.string.isRequired,
       }),
     }),
   }
 
   state = {}
 
+  getNonEmptyTabs(info) {
+    const tabs = ['Definition']
+
+    if (containsUsage(info.displayName)) {
+      tabs.push('Usage')
+    }
+
+    tabs.push('Props')
+
+    if (containsAccessibility(info)) {
+      tabs.push('Accessibility')
+    }
+
+    return tabs
+  }
+
   render() {
     const { match } = this.props
     const displayName = _.startCase(match.params.name).replace(/ /g, '')
     if (match.params.type === 'behaviors') {
-      return <DocsBehaviorRoot {...this.props} />
+      return null
     }
     const info = componentInfoContext.byDisplayName[displayName]
+    const tabs = this.getNonEmptyTabs(info)
 
-    if (info) return <ComponentDoc info={info} />
+    if (info) return <ComponentDoc info={info} tabs={tabs} />
 
     return <PageNotFound />
   }
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index ffd0b9ebfc..5cde4d39d9 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -51,8 +51,16 @@ class Sidebar extends React.Component<any, any> {
   }
 
   findActiveCategoryIndex = (at: string, sections: ShorthandValue<any>[]): number => {
+    let newAt = at
+    if (at.startsWith('/components')) {
+      newAt = newAt.replace(/[^\/]*$/, '')
+    }
+    if (newAt[newAt.length - 1] === '/') {
+      newAt = newAt.substr(0, newAt.length - 1)
+    }
+
     return _.findIndex(sections, (section: ShorthandValue<HierarchicalTreeItemProps>) => {
-      return _.find((section as any).items, item => item.title.to === at)
+      return _.find((section as any).items, item => item.title.to.startsWith(newAt))
     })
   }
 
diff --git a/docs/src/examples/components/Accordion/BestPractices/index.tsx b/docs/src/examples/components/Accordion/BestPractices/index.tsx
deleted file mode 100644
index 9a93773334..0000000000
--- a/docs/src/examples/components/Accordion/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import AccordionBestPractices from './AccordionBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <AccordionBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Accordion/Usage/index.tsx b/docs/src/examples/components/Accordion/Usage/index.tsx
index 480e46eccc..263c86033a 100644
--- a/docs/src/examples/components/Accordion/Usage/index.tsx
+++ b/docs/src/examples/components/Accordion/Usage/index.tsx
@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Custom panel title"
       description="Accordion panel's title can be customized."
diff --git a/docs/src/examples/components/Accordion/index.tsx b/docs/src/examples/components/Accordion/index.tsx
index e980a5dba2..a07c1dead4 100644
--- a/docs/src/examples/components/Accordion/index.tsx
+++ b/docs/src/examples/components/Accordion/index.tsx
@@ -1,15 +1,11 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
-import Usage from './Usage'
 
 const AccordionExamples = () => (
   <>
-    <BestPractices />
     <Types />
-    <Usage />
     <Rtl />
   </>
 )
diff --git a/docs/src/examples/components/Alert/BestPractices/index.tsx b/docs/src/examples/components/Alert/BestPractices/index.tsx
deleted file mode 100644
index 9509d8c786..0000000000
--- a/docs/src/examples/components/Alert/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import AlertBestPractices from './AlertBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <AlertBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Alert/index.tsx b/docs/src/examples/components/Alert/index.tsx
index 0ade5705a1..c184793bbf 100644
--- a/docs/src/examples/components/Alert/index.tsx
+++ b/docs/src/examples/components/Alert/index.tsx
@@ -3,11 +3,9 @@ import * as React from 'react'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
-import BestPractices from './BestPractices'
 
 const AlertExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <Variations />
     <Rtl />
diff --git a/docs/src/examples/components/Avatar/Usage/index.tsx b/docs/src/examples/components/Avatar/Usage/index.tsx
index 4fce4a8bfc..ba2698a499 100644
--- a/docs/src/examples/components/Avatar/Usage/index.tsx
+++ b/docs/src/examples/components/Avatar/Usage/index.tsx
@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Match Background Example"
       description="The status border for avatar should be set to match whatever background it is on."
diff --git a/docs/src/examples/components/Avatar/index.tsx b/docs/src/examples/components/Avatar/index.tsx
index aaa251afc8..1c5976ec7e 100644
--- a/docs/src/examples/components/Avatar/index.tsx
+++ b/docs/src/examples/components/Avatar/index.tsx
@@ -3,13 +3,11 @@ import * as React from 'react'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
-import Usage from './Usage'
 
 const AvatarExamples = () => (
   <>
     <Types />
     <Variations />
-    <Usage />
     <Rtl />
   </>
 )
diff --git a/docs/src/examples/components/Button/BestPractices/index.tsx b/docs/src/examples/components/Button/BestPractices/index.tsx
deleted file mode 100644
index bfa0bef58a..0000000000
--- a/docs/src/examples/components/Button/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import ButtonBestPractices from './ButtonBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <ButtonBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Button/Types/index.tsx b/docs/src/examples/components/Button/Types/index.tsx
index b2fe655fa6..29861bfc8f 100644
--- a/docs/src/examples/components/Button/Types/index.tsx
+++ b/docs/src/examples/components/Button/Types/index.tsx
@@ -24,11 +24,6 @@ const Types = () => (
       description="A button can be formatted differently if it indicate that it contains only an icon."
       examplePath="components/Button/Types/ButtonExampleIconOnly"
     />
-    <ComponentExample
-      title="Content and Icon"
-      description="A button can have an icon in addition to content."
-      examplePath="components/Button/Types/ButtonExampleContentAndIcon"
-    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.steps.ts b/docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand.steps.ts
similarity index 100%
rename from docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.steps.ts
rename to docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand.steps.ts
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx b/docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.shorthand.tsx
rename to docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.shorthand.tsx
diff --git a/docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx b/docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.tsx
similarity index 100%
rename from docs/src/examples/components/Button/Types/ButtonExampleContentAndIcon.tsx
rename to docs/src/examples/components/Button/Usage/ButtonExampleContentAndIcon.tsx
diff --git a/docs/src/examples/components/Button/Usage/index.tsx b/docs/src/examples/components/Button/Usage/index.tsx
index 05ad093ecc..1ad904f416 100644
--- a/docs/src/examples/components/Button/Usage/index.tsx
+++ b/docs/src/examples/components/Button/Usage/index.tsx
@@ -4,7 +4,12 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
+    <ComponentExample
+      title="Content and Icon"
+      description="A button can have an icon in addition to content."
+      examplePath="components/Button/Usage/ButtonExampleContentAndIcon"
+    />
     <ComponentExample
       title="Overflow"
       description="A button can have content that overflows."
diff --git a/docs/src/examples/components/Button/index.tsx b/docs/src/examples/components/Button/index.tsx
index 247a6a3b72..49bea516f1 100644
--- a/docs/src/examples/components/Button/index.tsx
+++ b/docs/src/examples/components/Button/index.tsx
@@ -1,22 +1,18 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Types from './Types'
 import Variations from './Variations'
 import States from './States'
 import Groups from './Groups'
-import Usage from './Usage'
 import Rtl from './Rtl'
 import Performance from './Performance'
 
 const ButtonExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <States />
     <Variations />
     <Groups />
-    <Usage />
     <Rtl />
     <Performance />
   </>
diff --git a/docs/src/examples/components/Dialog/BestPractices/index.tsx b/docs/src/examples/components/Dialog/BestPractices/index.tsx
deleted file mode 100644
index c419eb27ce..0000000000
--- a/docs/src/examples/components/Dialog/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import DialogBestPractices from './DialogBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <DialogBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Dialog/Usage/index.tsx b/docs/src/examples/components/Dialog/Usage/index.tsx
index 02343499ab..c9a96b7a16 100644
--- a/docs/src/examples/components/Dialog/Usage/index.tsx
+++ b/docs/src/examples/components/Dialog/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const DialogUsageExamples = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Callbacks"
       description="A dialog has different callbacks."
diff --git a/docs/src/examples/components/Dialog/index.tsx b/docs/src/examples/components/Dialog/index.tsx
index 505e37f957..f8b18eb61a 100644
--- a/docs/src/examples/components/Dialog/index.tsx
+++ b/docs/src/examples/components/Dialog/index.tsx
@@ -1,16 +1,12 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Content from './Content'
 import Types from './Types'
-import Usage from './Usage'
 
 const DialogExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <Content />
-    <Usage />
   </>
 )
 
diff --git a/docs/src/examples/components/Dropdown/BestPractices/index.tsx b/docs/src/examples/components/Dropdown/BestPractices/index.tsx
deleted file mode 100644
index 3079a39bfb..0000000000
--- a/docs/src/examples/components/Dropdown/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import DropdownBestPractices from './DropdownBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <DropdownBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Dropdown/Usage/index.tsx b/docs/src/examples/components/Dropdown/Usage/index.tsx
index 1f36099ebc..d5f18fd3f6 100644
--- a/docs/src/examples/components/Dropdown/Usage/index.tsx
+++ b/docs/src/examples/components/Dropdown/Usage/index.tsx
@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Controlled"
       description="A dropdown can handle open state in controlled mode."
diff --git a/docs/src/examples/components/Dropdown/index.tsx b/docs/src/examples/components/Dropdown/index.tsx
index 7fd3f9fff9..8ea93148a4 100644
--- a/docs/src/examples/components/Dropdown/index.tsx
+++ b/docs/src/examples/components/Dropdown/index.tsx
@@ -1,20 +1,16 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Performance from './Performance'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
 import State from './State'
-import Usage from './Usage'
 
 const DropdownExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <Variations />
     <State />
-    <Usage />
     <Rtl />
     <Performance />
   </>
diff --git a/docs/src/examples/components/Embed/Usage/index.tsx b/docs/src/examples/components/Embed/Usage/index.tsx
index d5060e1e49..0a91cf2988 100644
--- a/docs/src/examples/components/Embed/Usage/index.tsx
+++ b/docs/src/examples/components/Embed/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="YouTube"
       description="An embed component can embed a YouTube video by iframe."
diff --git a/docs/src/examples/components/Embed/index.tsx b/docs/src/examples/components/Embed/index.tsx
index 301cfab45a..301f0f302c 100644
--- a/docs/src/examples/components/Embed/index.tsx
+++ b/docs/src/examples/components/Embed/index.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 
 import Slots from './Slots'
-import Usage from './Usage'
 
 const EmbedExamples = () => (
   <>
     <Slots />
-    <Usage />
   </>
 )
 
diff --git a/docs/src/examples/components/Form/BestPractices/index.tsx b/docs/src/examples/components/Form/BestPractices/index.tsx
deleted file mode 100644
index b6e4a661b6..0000000000
--- a/docs/src/examples/components/Form/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import FormBestPractices from './FormBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <FormBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Form/index.tsx b/docs/src/examples/components/Form/index.tsx
index 3eaacdad08..cd13e449c0 100644
--- a/docs/src/examples/components/Form/index.tsx
+++ b/docs/src/examples/components/Form/index.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
 
 const FormExamples = () => (
   <div>
-    <BestPractices />
     <Types />
     <Rtl />
   </div>
diff --git a/docs/src/examples/components/Grid/BestPractices/index.tsx b/docs/src/examples/components/Grid/BestPractices/index.tsx
deleted file mode 100644
index 9165aea0de..0000000000
--- a/docs/src/examples/components/Grid/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import GridBestPractices from './GridBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <GridBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Grid/index.tsx b/docs/src/examples/components/Grid/index.tsx
index 0f039d3bdc..ffb33f0460 100644
--- a/docs/src/examples/components/Grid/index.tsx
+++ b/docs/src/examples/components/Grid/index.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import { Alert } from '@stardust-ui/react'
 import { Link } from 'react-router-dom'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
@@ -16,7 +15,6 @@ const GridExamples = () => (
       </p>
     </Alert>
 
-    <BestPractices />
     <Types />
     <Variations />
     <Rtl />
diff --git a/docs/src/examples/components/Icon/BestPractices/index.tsx b/docs/src/examples/components/Icon/BestPractices/index.tsx
deleted file mode 100644
index 8b41354c77..0000000000
--- a/docs/src/examples/components/Icon/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import IconBestPractices from './IconBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <IconBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Icon/Usage/index.tsx b/docs/src/examples/components/Icon/Usage/index.tsx
index edce4e6461..318e8a6fa8 100644
--- a/docs/src/examples/components/Icon/Usage/index.tsx
+++ b/docs/src/examples/components/Icon/Usage/index.tsx
@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Theme Icons"
       description="You can access all icon names available in the current theme."
diff --git a/docs/src/examples/components/Icon/index.tsx b/docs/src/examples/components/Icon/index.tsx
index 4815eba83e..407e01244e 100644
--- a/docs/src/examples/components/Icon/index.tsx
+++ b/docs/src/examples/components/Icon/index.tsx
@@ -1,20 +1,16 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Performance from './Performance'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
 import States from './States'
-import Usage from './Usage'
 
 const IconExamples = () => (
   <div>
-    <BestPractices />
     <Types />
     <States />
     <Variations />
-    <Usage />
     <Rtl />
     <Performance />
   </div>
diff --git a/docs/src/examples/components/Input/BestPractices/index.tsx b/docs/src/examples/components/Input/BestPractices/index.tsx
deleted file mode 100644
index 7a793b66ef..0000000000
--- a/docs/src/examples/components/Input/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import InputBestPractices from './InputBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <InputBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Input/index.tsx b/docs/src/examples/components/Input/index.tsx
index 1fa6887169..8204c345b0 100644
--- a/docs/src/examples/components/Input/index.tsx
+++ b/docs/src/examples/components/Input/index.tsx
@@ -1,13 +1,11 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
 
 const InputExamples = () => (
   <div>
-    <BestPractices />
     <Types />
     <Variations />
     <Rtl />
diff --git a/docs/src/examples/components/Loader/Usage/index.tsx b/docs/src/examples/components/Loader/Usage/index.tsx
index ee9faf1d7a..66e81cd0b0 100644
--- a/docs/src/examples/components/Loader/Usage/index.tsx
+++ b/docs/src/examples/components/Loader/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const LoaderUsageExamples = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Delay"
       description="Time in milliseconds after component mount before spinner is visible."
diff --git a/docs/src/examples/components/Loader/index.tsx b/docs/src/examples/components/Loader/index.tsx
index c3b37a6943..bb637a79cc 100644
--- a/docs/src/examples/components/Loader/index.tsx
+++ b/docs/src/examples/components/Loader/index.tsx
@@ -3,14 +3,12 @@ import * as React from 'react'
 import Performance from './Performance'
 import Rtl from './Rtl'
 import Types from './Types'
-import Usage from './Usage'
 import Variations from './Variations'
 
 const LoaderExamples = () => (
   <>
     <Types />
     <Variations />
-    <Usage />
     <Performance />
     <Rtl />
   </>
diff --git a/docs/src/examples/components/Menu/BestPractices/index.tsx b/docs/src/examples/components/Menu/BestPractices/index.tsx
deleted file mode 100644
index 5b7156b301..0000000000
--- a/docs/src/examples/components/Menu/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import MenuBestPractices from './MenuBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <MenuBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleTabList.shorthand.tsx b/docs/src/examples/components/Menu/Usage/MenuExampleTabList.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleTabList.shorthand.tsx
rename to docs/src/examples/components/Menu/Usage/MenuExampleTabList.shorthand.tsx
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.steps.ts b/docs/src/examples/components/Menu/Usage/MenuExampleToolbar.shorthand.steps.ts
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.steps.ts
rename to docs/src/examples/components/Menu/Usage/MenuExampleToolbar.shorthand.steps.ts
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Usage/MenuExampleToolbar.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
rename to docs/src/examples/components/Menu/Usage/MenuExampleToolbar.shorthand.tsx
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenu.shorthand.steps.ts b/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand.steps.ts
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenu.shorthand.steps.ts
rename to docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand.steps.ts
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenu.shorthand.tsx b/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenu.shorthand.tsx
rename to docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenu.shorthand.tsx
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenuControlled.shorthand.tsx b/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleWithSubmenuControlled.shorthand.tsx
rename to docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand.tsx
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts b/docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.steps.ts
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.steps.ts
rename to docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.steps.ts
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx b/docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Menu/Usages/MenuExampleWithTooltip.shorthand.tsx
rename to docs/src/examples/components/Menu/Usage/MenuExampleWithTooltip.shorthand.tsx
diff --git a/docs/src/examples/components/Menu/Usages/index.tsx b/docs/src/examples/components/Menu/Usage/index.tsx
similarity index 74%
rename from docs/src/examples/components/Menu/Usages/index.tsx
rename to docs/src/examples/components/Menu/Usage/index.tsx
index 24587dda21..93d1a3ea52 100644
--- a/docs/src/examples/components/Menu/Usages/index.tsx
+++ b/docs/src/examples/components/Menu/Usage/index.tsx
@@ -3,27 +3,27 @@ import { Link } from 'react-router-dom'
 import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
-const Usages = () => (
-  <ExampleSection title="Usages">
+const Usage = () => (
+  <ExampleSection title="">
     <ComponentExample
       title="Menu as a Toolbar"
       description="A menu with Toolbar accessibility behavior."
-      examplePath="components/Menu/Usages/MenuExampleToolbar"
+      examplePath="components/Menu/Usage/MenuExampleToolbar"
     />
     <ComponentExample
       title="Menu as a Tab List"
       description="A menu with TabList accessibility behavior."
-      examplePath="components/Menu/Usages/MenuExampleTabList"
+      examplePath="components/Menu/Usage/MenuExampleTabList"
     />
     <ComponentExample
       title="Menu with submenus"
       description="A menu can have submenus."
-      examplePath="components/Menu/Usages/MenuExampleWithSubmenu"
+      examplePath="components/Menu/Usage/MenuExampleWithSubmenu"
     />
     <ComponentExample
       title="Menu with submenus controlled"
       description="When Submenu in MenuItem is controlled, then its 'menuOpen' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onMenuOpenChange' event."
-      examplePath="components/Menu/Usages/MenuExampleWithSubmenuControlled"
+      examplePath="components/Menu/Usage/MenuExampleWithSubmenuControlled"
     />
     <ComponentExample
       title="With tooltips"
@@ -33,9 +33,9 @@ const Usages = () => (
           <Link to="/components/tooltip">tooltip</Link>
         </>
       }
-      examplePath="components/Menu/Usages/MenuExampleWithTooltip"
+      examplePath="components/Menu/Usage/MenuExampleWithTooltip"
     />
   </ExampleSection>
 )
 
-export default Usages
+export default Usage
diff --git a/docs/src/examples/components/Menu/index.tsx b/docs/src/examples/components/Menu/index.tsx
index 6881ba1aea..9a90ade790 100644
--- a/docs/src/examples/components/Menu/index.tsx
+++ b/docs/src/examples/components/Menu/index.tsx
@@ -1,21 +1,17 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
 import Slots from './Slots'
 import States from './States'
 import Variations from './Variations'
-import Usages from './Usages'
 
 const MenuExamples = () => (
   <div>
-    <BestPractices />
     <Types />
     <Slots />
     <States />
     <Variations />
-    <Usages />
     <Rtl />
   </div>
 )
diff --git a/docs/src/examples/components/MenuButton/Usage/index.tsx b/docs/src/examples/components/MenuButton/Usage/index.tsx
index 21d5b8687d..5cc2a8e24f 100644
--- a/docs/src/examples/components/MenuButton/Usage/index.tsx
+++ b/docs/src/examples/components/MenuButton/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Triggering menu on different actions"
       description="A context menu can be triggered on click, hover, focus or context."
diff --git a/docs/src/examples/components/MenuButton/index.tsx b/docs/src/examples/components/MenuButton/index.tsx
index 17dbfd37a1..ff29418563 100644
--- a/docs/src/examples/components/MenuButton/index.tsx
+++ b/docs/src/examples/components/MenuButton/index.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 
 import Rtl from './Rtl'
-import Usage from './Usage'
 import State from './State'
 
 const MenuButtonExamples = () => (
   <>
-    <Usage />
     <State />
     <Rtl />
   </>
diff --git a/docs/src/examples/components/Popup/BestPractices/index.tsx b/docs/src/examples/components/Popup/BestPractices/index.tsx
deleted file mode 100644
index 5671cbc025..0000000000
--- a/docs/src/examples/components/Popup/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import PopupBestPractices from './PopupBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <PopupBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Popup/Usage/index.tsx b/docs/src/examples/components/Popup/Usage/index.tsx
index bc43350695..3ccb7950cb 100644
--- a/docs/src/examples/components/Popup/Usage/index.tsx
+++ b/docs/src/examples/components/Popup/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Async popup position update"
       description="A popup can be forced to update its position - this comes in handy in async data loading scenarios."
diff --git a/docs/src/examples/components/Popup/index.tsx b/docs/src/examples/components/Popup/index.tsx
index c18707567e..5cc9c09743 100644
--- a/docs/src/examples/components/Popup/index.tsx
+++ b/docs/src/examples/components/Popup/index.tsx
@@ -1,17 +1,13 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
-import Usage from './Usage'
 
 const PopupExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <Variations />
-    <Usage />
     <Rtl />
   </>
 )
diff --git a/docs/src/examples/components/Provider/Usage/index.tsx b/docs/src/examples/components/Provider/Usage/index.tsx
index a51dcfaf5c..1822823f8a 100644
--- a/docs/src/examples/components/Provider/Usage/index.tsx
+++ b/docs/src/examples/components/Provider/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Target"
       description="A Provider allows to define target document to apply styles."
diff --git a/docs/src/examples/components/Provider/index.tsx b/docs/src/examples/components/Provider/index.tsx
index 21105833cf..f00a56f958 100644
--- a/docs/src/examples/components/Provider/index.tsx
+++ b/docs/src/examples/components/Provider/index.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 
 import Types from './Types'
-import Usage from './Usage'
 
 const ProviderExamples = () => (
   <>
     <Types />
-    <Usage />
   </>
 )
 
diff --git a/docs/src/examples/components/Reaction/BestPractices/index.tsx b/docs/src/examples/components/Reaction/BestPractices/index.tsx
deleted file mode 100644
index 1e29ee3aab..0000000000
--- a/docs/src/examples/components/Reaction/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import ReactionBestPractices from './ReactionBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <ReactionBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Reaction/index.tsx b/docs/src/examples/components/Reaction/index.tsx
index aad23dab16..9943f19e0d 100644
--- a/docs/src/examples/components/Reaction/index.tsx
+++ b/docs/src/examples/components/Reaction/index.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import Types from './Types'
 
 const ReactionExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <Rtl />
   </>
diff --git a/docs/src/examples/components/Slider/BestPractices/index.tsx b/docs/src/examples/components/Slider/BestPractices/index.tsx
deleted file mode 100644
index 3411575bc1..0000000000
--- a/docs/src/examples/components/Slider/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import SliderBestPractices from './SliderBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <SliderBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Slider/Usage/index.tsx b/docs/src/examples/components/Slider/Usage/index.tsx
index 75df8a8636..0455309146 100644
--- a/docs/src/examples/components/Slider/Usage/index.tsx
+++ b/docs/src/examples/components/Slider/Usage/index.tsx
@@ -3,7 +3,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Slider with label in a form"
       description="Shows how a slider can be used together with a label to display information in the context of a form."
diff --git a/docs/src/examples/components/Slider/index.tsx b/docs/src/examples/components/Slider/index.tsx
index f78ac8ef8a..c87fcf45b9 100644
--- a/docs/src/examples/components/Slider/index.tsx
+++ b/docs/src/examples/components/Slider/index.tsx
@@ -1,19 +1,15 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Types from './Types'
 import States from './States'
 import Variations from './Variations'
-import Usage from './Usage'
 import Rtl from './Rtl'
 
 const SliderExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <States />
     <Variations />
-    <Usage />
     <Rtl />
   </>
 )
diff --git a/docs/src/examples/components/Status/BestPractices/index.tsx b/docs/src/examples/components/Status/BestPractices/index.tsx
deleted file mode 100644
index 5e31ba6c85..0000000000
--- a/docs/src/examples/components/Status/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import StatusBestPractices from './StatusBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <StatusBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Status/index.tsx b/docs/src/examples/components/Status/index.tsx
index 40e76dc865..6178c34bb5 100644
--- a/docs/src/examples/components/Status/index.tsx
+++ b/docs/src/examples/components/Status/index.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Types from './Types'
 import Variations from './Variations'
 
 const StatusExamples = () => (
   <div>
-    <BestPractices />
     <Types />
     <Variations />
   </div>
diff --git a/docs/src/examples/components/Text/BestPractices/index.tsx b/docs/src/examples/components/Text/BestPractices/index.tsx
deleted file mode 100644
index a1a75a92f2..0000000000
--- a/docs/src/examples/components/Text/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import TextBestPractices from './TextBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <TextBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Text/index.tsx b/docs/src/examples/components/Text/index.tsx
index 978a2f0660..7640a28062 100644
--- a/docs/src/examples/components/Text/index.tsx
+++ b/docs/src/examples/components/Text/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import BestPractices from './BestPractices'
 import Rtl from './Rtl'
 import States from './States'
 import Types from './Types'
@@ -8,7 +7,6 @@ import Variations from './Variations'
 
 const TextExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <States />
     <Variations />
diff --git a/docs/src/examples/components/Toolbar/Usage/index.tsx b/docs/src/examples/components/Toolbar/Usage/index.tsx
index cd67449aaf..74ceb4401c 100644
--- a/docs/src/examples/components/Toolbar/Usage/index.tsx
+++ b/docs/src/examples/components/Toolbar/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="With tooltips"
       description={
diff --git a/docs/src/examples/components/Toolbar/index.tsx b/docs/src/examples/components/Toolbar/index.tsx
index 406af057a4..ece90d9811 100644
--- a/docs/src/examples/components/Toolbar/index.tsx
+++ b/docs/src/examples/components/Toolbar/index.tsx
@@ -2,13 +2,11 @@ import * as React from 'react'
 
 import Types from './Types'
 import Content from './Content'
-import Usage from './Usage'
 
 const ToolbarExamples = () => (
   <>
     <Types />
     <Content />
-    <Usage />
   </>
 )
 
diff --git a/docs/src/examples/components/Tooltip/BestPractices/index.tsx b/docs/src/examples/components/Tooltip/BestPractices/index.tsx
deleted file mode 100644
index b502484028..0000000000
--- a/docs/src/examples/components/Tooltip/BestPractices/index.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-
-import TooltipBestPractices from '././TooltipBestPractices'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const BestPractices = () => (
-  <ExampleSection title="Best Practices">
-    <TooltipBestPractices />
-  </ExampleSection>
-)
-
-export default BestPractices
diff --git a/docs/src/examples/components/Tooltip/Usage/index.tsx b/docs/src/examples/components/Tooltip/Usage/index.tsx
index 93c4e114b6..620f76a281 100644
--- a/docs/src/examples/components/Tooltip/Usage/index.tsx
+++ b/docs/src/examples/components/Tooltip/Usage/index.tsx
@@ -4,7 +4,7 @@ import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 
 const Usage = () => (
-  <ExampleSection title="Usage">
+  <ExampleSection title="">
     <ComponentExample
       title="Custom Target"
       description="By default Tooltip uses trigger element as the one it is displayed for, but it is possible to provide any DOM element as tooltip's target."
diff --git a/docs/src/examples/components/Tooltip/index.tsx b/docs/src/examples/components/Tooltip/index.tsx
index 2ab063d1ae..16bf054093 100644
--- a/docs/src/examples/components/Tooltip/index.tsx
+++ b/docs/src/examples/components/Tooltip/index.tsx
@@ -3,17 +3,13 @@ import * as React from 'react'
 import Rtl from './Rtl'
 import Types from './Types'
 import Variations from './Variations'
-import Usage from './Usage'
 import States from './States'
-import BestPractices from './BestPractices'
 
 const TooltipExamples = () => (
   <>
-    <BestPractices />
     <Types />
     <Variations />
     <States />
-    <Usage />
     <Rtl />
   </>
 )
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 3573e5c96b..f3fcfc5480 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react'
-import { BrowserRouter, Route, Switch } from 'react-router-dom'
+import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
 
 import ExternalExampleLayout from './components/ExternalExampleLayout'
 import DocsLayout from './components/DocsLayout'
 import DocsRoot from './components/DocsRoot'
+import DocsBehaviorRoot from './components/DocsBehaviorRoot'
 import MarkdownPage from 'docs/src/components/MarkdownPage'
 
 import * as Composition from './pages/Composition.mdx'
@@ -47,7 +48,13 @@ const Routes = () => (
       <DocsLayout>
         <Switch>
           <Route exact path="/" component={Introduction} />
-          <Route exact path="/:type/:name" component={DocsRoot} sidebar />
+          <Route exact path="/components/:name/:tab" component={DocsRoot} sidebar />
+          <Route
+            exact
+            path="/components/:name"
+            render={routeProps => <Redirect to={`${routeProps.location.pathname}/definition`} />}
+          />
+          <Route exact path="/behaviors/:name" component={DocsBehaviorRoot} sidebar />
           <Route exact path="/quick-start" component={QuickStart} />
           <Route exact path="/prototype-chat-pane" component={ChatPanePrototype} />
           <Route exact path="/prototype-chat-messages" component={ChatMessagesPrototype} />
diff --git a/docs/src/utils/exampleContexts.ts b/docs/src/utils/exampleContexts.ts
index 4121e1e141..04d0572594 100644
--- a/docs/src/utils/exampleContexts.ts
+++ b/docs/src/utils/exampleContexts.ts
@@ -3,6 +3,20 @@
  */
 export const exampleIndexContext = require.context('docs/src/examples/', true, /index.tsx$/)
 
+/**
+ * The Webpack Context for doc site usage groups.
+ */
+export const usageIndexContext = require.context('docs/src/examples', true, /Usage\/index.tsx$/)
+
+/**
+ * The Webpack Context for doc site example groups.
+ */
+export const exampleBestPracticesContext = require.context(
+  'docs/src/examples/',
+  true,
+  /BestPractices.tsx$/,
+)
+
 /**
  * The Webpack Context for component playgrounds.
  */
diff --git a/docs/src/utils/index.tsx b/docs/src/utils/index.tsx
index 8ddd177e53..f524569d5c 100644
--- a/docs/src/utils/index.tsx
+++ b/docs/src/utils/index.tsx
@@ -1,6 +1,8 @@
 export { default as componentInfoContext } from './componentInfoContext'
 export {
   exampleIndexContext,
+  usageIndexContext,
+  exampleBestPracticesContext,
   examplePlaygroundContext,
   exampleSourcesContext,
 } from './exampleContexts'