`.
diff --git a/website/docs/components/layout/bottom_bar/_category_.yml b/website/docs/components/layout/bottom_bar/_category_.yml
new file mode 100644
index 000000000000..a26163a9efd1
--- /dev/null
+++ b/website/docs/components/layout/bottom_bar/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_bottom_bar_overview
diff --git a/website/docs/components/layout/bottom_bar/overview.mdx b/website/docs/components/layout/bottom_bar/overview.mdx
new file mode 100644
index 000000000000..1a0869f787a4
--- /dev/null
+++ b/website/docs/components/layout/bottom_bar/overview.mdx
@@ -0,0 +1,36 @@
+---
+id: component_bottom_bar_overview
+title: Bottom bar
+slug: /components/bottom-bar
+export_name: EuiBottomBar
+---
+
+:::note
+
+**EuiPageTemplate** offers a quick way to
+[apply a bottom bar to your page layouts](#/templates/page-template#showing-a-bottom-bar).
+
+:::
+
+**EuiBottomBar** is a simple wrapper component that does nothing but affix a dark bar (usually filled with buttons)
+to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms.
+In the case of forms, only invoke it if a form is in a savable state.
+
+Like many of our other wrapper components, **EuiBottomBar** accepts a `paddingSize` prop,
+which can be set to `s | m (default) | l | none`.
+
+## Positions
+
+Bottom bars default to a fixed position, in a portal at the bottom of the browser window.
+Alternatively, you can change the `position` to `sticky` where it will render in place but stick to the window only
+as the window edge nears. The `static` position reverts back to default DOM behavior.
+
+You can also apply a different set of positioning locations just by adjusting
+them in with the `top | right | bottom | left` props.
+
+## Displacement
+
+There is an `affordForDisplacement` prop (defaulting to `true`), which determines whether the component makes room
+for itself by adding bottom padding equivalent to its own height on the document `` element.
+Setting this to `false` can be useful to minimize scrollbar visibility but will cause the bottom bar
+to overlap body content.
diff --git a/website/docs/components/layout/flex/_category_.yml b/website/docs/components/layout/flex/_category_.yml
new file mode 100644
index 000000000000..1e69486d0f07
--- /dev/null
+++ b/website/docs/components/layout/flex/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_flex_overview
diff --git a/website/docs/components/layout/flex/overview.mdx b/website/docs/components/layout/flex/overview.mdx
new file mode 100644
index 000000000000..05084865449b
--- /dev/null
+++ b/website/docs/components/layout/flex/overview.mdx
@@ -0,0 +1,105 @@
+---
+id: component_flex_overview
+title: Flex
+slug: /components/flex
+export_name:
+ - EuiFlexGroup
+ - EuiFlexGrid
+ - EuiFlexItem
+---
+
+:::note
+
+Coloring and padding exist for examples only
+
+Padding and background-color are added to all the **EuiFlexItem** components on this documentation page
+for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
+
+:::
+
+## Flex group is for a single row layout
+
+**EuiFlexGroup** is useful for setting up layouts for a **single row** of content.
+By default any **EuiFlexItem** within **EuiFlexGroup** will stretch and grow to match their siblings.
+
+## Flex items are also flex
+
+To allow for continued stretching of nested **EuiFlexGroup**'s and its items, each **EuiFlexItem** also has
+the property of `display: flex`. This can cause unwanted layouts of your content when there are multiple elements
+or if the element itself also has some specific `display` property.
+
+To alleviate this, the simplest method is to wrap your inner children with a simple HTML element
+like a `
` or `
`.
+
+:::
+
+## Gutter sizing[](#/layout/flex#gutter-sizing)
+
+The `gutterSize` prop can be applied to either a **EuiFlexGroup** or a **EuiFlexGrid** to adjust
+the spacing between **EuiFlexItems**.
diff --git a/website/docs/components/layout/flyout/_category_.yml b/website/docs/components/layout/flyout/_category_.yml
new file mode 100644
index 000000000000..b89fbbcb4ff3
--- /dev/null
+++ b/website/docs/components/layout/flyout/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_flyout_overview
diff --git a/website/docs/components/layout/flyout/overview.mdx b/website/docs/components/layout/flyout/overview.mdx
new file mode 100644
index 000000000000..e2a0da7d6e94
--- /dev/null
+++ b/website/docs/components/layout/flyout/overview.mdx
@@ -0,0 +1,81 @@
+---
+id: component_flyout_overview
+title: Flyout
+slug: /components/flyout
+export_name: EuiFlyout
+---
+
+**EuiFlyout** is a fixed position panel that pops in from the side of the window.
+It should be used to reveal more detailed contextual information or to provide complex forms without losing
+the user's current state. It is a good alternative to [modals](#/layout/modal) when the action is not transient.
+
+Like modals, you control the visibilty of the flyout using your own state management,
+but **EuiFlyout** requires an `onClose` handler for it's internal dismiss buttons.
+
+:::note
+
+Use `aria-labelledby={headingId}` to announce the flyout to screen readers.
+
+:::
+
+## More complicated flyout
+
+This component also comes with related child components for ease of creating headers,
+footers and scrolling body content. **EuiFlyoutHeader** and **EuiFlyoutFooter** are pinned to the top and bottom
+of the flyout, respectively, to allow for always visible navigation and actions. The **EuiFlyoutBody** component
+will then automatically overflow.
+
+## Sizing
+
+Flyouts come in three predefined `size`s of `'s' | 'm' | 'l'`, which define the width **relative to the window size**
+with a minimum width defined in pixels. You can otherwise supply your own fixed width in number or string format.
+
+## Adjusting padding
+
+All the inner flyout components inherit their padding from the wrapping **EuiFlyout** component.
+This ensures that all the horizontal edges line up no matter the `paddingSize`. When using the `"none"` size,
+you will need to accommodate your content with some other way of creating distance to the edges of the flyout.
+
+## Adding a banner
+
+To highlight some information at the top of a flyout, you can pass an [**EuiCallOut**](#/display/callout)
+to the `banner` prop available in **EuiFlyoutBody** and its layout will adjust appropriately.
+
+## Without ownFocus
+
+Like modals, you will usually want to obscure the page content beneath with `ownFocus` which wraps the flyout
+with an [**EuiOverlayMask**](#/utilities/overlay-mask) . However, there are use-cases where flyouts present more
+information or controls, but need to maintain the interactions of the page content. By setting `ownFocus={false}`,
+the underlying page content will be visible and clickable.
+
+## Push versus overlay
+
+Another way to allow for continued interactions of the page content while a flyout is visible,
+is to change the `type` from `overlay` to `push`.
+
+A pushed flyout still positions itself as `fixed`, but adds padding to the document's body element to accommodate
+for the flyout's width. Because this squishes the page content, the flyout changes back to `overlay`
+at smaller window widths. You can adjust this minimum breakpoint with `pushMinBreakpoint`.
+
+:::warning
+
+Push flyouts require manual accessibility management
+
+Push flyouts do not use a focus trap, do not close on Escape keypress, do not inherit
+a [dialog role(opens in a new tab or window)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role),
+and do not include any of the default screen reader guidance that overlay flyouts contain out-of-the-box.
+
+Please be cautious when using push flyouts, and make sure you are managing your own focus and screen reader UX.
+
+:::
+
+## Understanding max-width
+
+By default, flyouts will continue to grow with the width of the window.
+To stop this growth at an ideal width, set `maxWidth` to `true`, or pass your own custom size.
+
+:::warning
+
+Note that there are some caveats to providing a maxWidth that is smaller than the minWidth.
+
+:::
diff --git a/website/docs/components/layout/header/_category_.yml b/website/docs/components/layout/header/_category_.yml
new file mode 100644
index 000000000000..0590438075b8
--- /dev/null
+++ b/website/docs/components/layout/header/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_header_overview
diff --git a/website/docs/components/layout/header/overview.mdx b/website/docs/components/layout/header/overview.mdx
new file mode 100644
index 000000000000..2b9f7dc1659a
--- /dev/null
+++ b/website/docs/components/layout/header/overview.mdx
@@ -0,0 +1,96 @@
+---
+id: component_header_overview
+title: Header
+slug: /components/header
+export_name:
+ - EuiHeader
+ - EuiHeaderSection
+ - EuiHeaderSectionItem
+ - EuiHeaderSectionItemButton
+ - EuiHeaderLogo
+ - EuiHeaderBreadcrumbs
+---
+
+The header is made up of **many** individual components starting with **EuiHeader** as the container.
+You can manually configure your header with the following related components:
+
+* **EuiHeaderSection**: Left/right containers with flex properties.
+* **EuiHeaderSectionItem**: Containers for individual header items as flex items.
+* **EuiHeaderSectionItemButton**: Specialized button that extends
+ [**EuiButtonEmpty**](#/navigation/button#empty-button) but styled to fit the height of the header
+ with additional `notification` props.
+* **EuiHeaderLogo**: A helpful component for creating a linked logo that fits within the header sizing.
+* **EuiHeaderBreadcrumbs**: A set of [**EuiBreadcrumbs**](#/navigation/breadcrumbs) specifically stylized
+ to fit inside the header.
+
+## Sections
+
+Alternatively, you can pass an array of objects to the `sections` prop that takes a key of `items`
+(array of children to wrap in an **EuiHeaderSectionItem**) and/or `breadcrumbs`
+(array of [breadcrumb](#/navigation/breadcrumbs) objects). Each item in the array will be wrapped
+in an **EuiHeaderSection**.
+
+**Note:** Passing `sections` and `children` will disregard the `children` as it is not easily interpreted
+at what location the children should be placed.
+
+## Header links
+
+In addition to the components mentioned prior, which lend themselves to more application style navigation patterns,
+**EuiHeaderLinks** and **EuiHeaderLink** supply the ability to inline a list of navigational or menu style links.
+
+**EuiHeaderLinks** comes with responsive functionality built-in which will convert the inline list of links
+to a popover list triggered by a **EuiHeaderSectionItemButton**. You can adjust at which breakpoints to switch
+to the popover display by passing your own array of named breakpoints to `popoverBreakpoints`.
+
+## Fixed header
+
+Most consumers need a header that does not scroll away with the page contents. You can set this display by applying
+the property `position="fixed"`. Multiple fixed headers will automatically stack underneath one another.
+No manual positioning is required.
+
+If you're using [**EuiPageTemplate**](#/templates/page-template), a padding top will be automatically set based
+on the number of fixed headers on the page. [**EuiFlyouts**](#/layout/flyout) will also automatically account
+for and sit below fixed headers.
+
+If you're using your own custom layout, or have custom UI that needs to sit below your fixed header(s),
+EUI provides a global CSS `var(--euiFixedHeadersOffset)` variable. You can use this variable anywhere,
+or even override it, to correctly offset any and all fixed header heights.
+
+## Dark theme
+
+To make site-wide navigation more prominent, **EuiHeader** supports reversing the colors to dark theme
+with `theme="dark"`. However, it only supports a **limited set of children** that will also shift their theme.
+These components include **EuiHeaderLogo, EuiHeaderLink(s),** **EuiHeaderSectionItemButton**
+and **EuiSelectableTemplateSitewide**. Any other content may not render correctly without custom configurations.
+
+## Portal content in the header
+
+Use an **EuiHeaderSectionItemButton** to display additional information in [popovers](#/layout/popover)
+or [flyouts](#/layout/flyout), such as a user profile or news feed. When using [**EuiFlyout**](#/layout/flyout),
+be sure to wrap it in a [**EuiPortal**](#/utilities/portal). When using an [**EuiPopover**](#/layout/popover)
+in conjunction with a **fixed** header, be sure to add the `repositionOnScroll` prop to the popover.
+
+The example below shows how to incorporate **EuiHeaderAlert** components to show a list of updates inside
+a [**EuiFlyout**](#/layout/flyout) and a [**EuiPopover**](#/layout/popover) .
+
+## Header notifications
+
+To alert or notify users about the additional information they are receiving, use the **EuiHeaderSectionItemButton**
+`notification` prop. You can pass a `node` that will render inside a **EuiBadgeNotification** or pass `true`
+to render a simple dot. You can also animate the button by calling the `euiAnimate()` method
+on the **EuiHeaderSectionItemButton** `ref`.
+
+## Stacked headers
+
+Stacking multiple headers provides a great way to separate global navigation concerns.
+
+## The Elastic navigation pattern
+
+### Putting it all together
+
+The button below will launch a fullscreen example that includes two **EuiHeaders** with all the appropriate
+navigation pieces including [**EuiCollapsibleNav**,](#/navigation/collapsible-nav) **EuiHeaderAlerts**, user menu,
+deployment switcher, space selector, **EuiHeaderBreadcrumbs** and **EuiHeaderLinks** for app menu items.
+
+This is just a pattern and should be treated as such. Consuming applications will need to recreate the pattern
+according to their context and save the states as is appropriate to their data store.
diff --git a/website/docs/components/layout/horizontal_rule/_category_.yml b/website/docs/components/layout/horizontal_rule/_category_.yml
new file mode 100644
index 000000000000..f7912d81373b
--- /dev/null
+++ b/website/docs/components/layout/horizontal_rule/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_horizontal_rule_overview
diff --git a/website/docs/components/layout/horizontal_rule/overview.mdx b/website/docs/components/layout/horizontal_rule/overview.mdx
new file mode 100644
index 000000000000..11a1beced093
--- /dev/null
+++ b/website/docs/components/layout/horizontal_rule/overview.mdx
@@ -0,0 +1,14 @@
+---
+id: component_horizontal_rule_overview
+title: Horizontal rule
+slug: /components/horizontal-rule
+export_name: EuiHorizontalRule
+---
+
+**EuiHorizontalRule** is a styled `` for controlling the width.
+It stretches to fill its container and accepts all of the same [**EuiPanel**](#/layout/panel) props to style your panel.
+
+The default props clear most of the **EuiPanel** styles, but you can add them back in with `color`,
+`hasShadow`, and `paddingSize`.
+
+## Horizontal resizing with controlled widths
+
+Sometimes it's necessary to control panel sizes from the outside. For example to store sizes
+in `localStorage` or change the layout with predefined sizes. Here is the `onPanelWidthChange` and `size`
+props for help. If you use such an approach, you have to specify an `id` prop for each panel to track their sizes.
+
+:::warning
+
+Required properties
+
+Either `initialSize` or `size` must be specified. The `size` prop is for cases where a parent component
+will control sizing updates.
+
+:::
+
+## Vertical resizing
+
+Set `direction=vertical` on **EuiResizableContainer** to set a vertical orientation of the resizable panels.
+
+## Resizable container callbacks
+
+**EuiResizableContainer** supports `onResizeStart` and `onResizeEnd` callback props to listen for when resizing
+starts and ends. The `onResizeStart` callback is passed a `trigger: 'pointer' | 'key'` parameter to determine which
+user action triggered the resize.
+
+## Collapsible resizable panels
+
+Panels can be designated as collapsible, which allows them to hide content and automatically resize to a minimal width.
+The intent of collapsible panels is to enable large, layout-level content areas to cede space to a main content area.
+For instance, collapsing an action panel to allow more focus on the primary display panel.
+
+Use the `mode` prop on an **EuiResizablePanel** to mark it as `collapsible` or `main`. From the provided `mode`
+configuration, the **EuiResizableContainer** will determine placement of the toggle button and functionality
+of panel collapsing. To prevent empty states, not all panels can be `mode=collapsible`
+(there must be at least one `mode=main` panel).
+
+## Responsive layout
+
+It is possible to dynamically change the `direction` prop to allow for adapting layouts to screen size.
+Resize the window to see the panel orientation change.
+
+## Collapsible panel options
+
+An **EuiResizablePanel** marked as `mode={['collapsible']}` also accepts configuration options for the collapsible
+button by passing a second parameter, in the form of:
+
+```jsx
+mode={['collapsible', {
+ 'data-test-subj': 'panel-1-toggle',
+ className: 'panel-toggle',
+ position: 'top',
+}]}
+```
+
+## Collapsible panels with external control
+
+**EuiResizableContainer** also provides action hooks for parent components to access internal methods,
+such as **EuiResizablePanel** collapse toggling. The actions are accessible via the third parameter
+of the render prop function.
+
+Note that when bypassing internal **EuiResizableContainer** logic, it is possible to create situations
+that would otherwise be prevented. For instance, allowing all panels to be collapsed creates a scenerio where
+your app will need to account for empty state and accesibility in regards to keyboard navigation.
+
+### Custom collapse button
+
+You can also provide an external collapse button for custom placement and look within your panel with
+`mode={['custom']}`. When collapsed, however, the default collapsed button will be used for users
+to uncollapse the panel.
+
+For consistency, we recommend the usage of the `menuLeft`, `menuRight`, etc, icon types.
+
+## Custom resizable button
+
+If you want to break out of **EuiResizableContainer** usage completely, you may import the standalone
+**EuiResizableButton** component. You will need to attach your own mouse, touch, and keyboard events
+and logic to the button - see the example below.
diff --git a/website/docs/components/layout/spacer/_category_.yml b/website/docs/components/layout/spacer/_category_.yml
new file mode 100644
index 000000000000..2d95877c05e0
--- /dev/null
+++ b/website/docs/components/layout/spacer/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_spacer_overview
diff --git a/website/docs/components/layout/spacer/overview.mdx b/website/docs/components/layout/spacer/overview.mdx
new file mode 100644
index 000000000000..06b7301804b7
--- /dev/null
+++ b/website/docs/components/layout/spacer/overview.mdx
@@ -0,0 +1,10 @@
+---
+id: component_spacer_overview
+title: Spacer
+slug: /components/spacer
+export_name: EuiSpacer
+---
+
+The **EuiSpacer** component is for adding vertical space between items and should be used in place
+of the `
` tag. There are many different heights you can specify via the `size` prop which align
+to the EUI vertical grid sizing.
diff --git a/website/docs/components/navigation/_category_.yml b/website/docs/components/navigation/_category_.yml
new file mode 100644
index 000000000000..d68255642ac8
--- /dev/null
+++ b/website/docs/components/navigation/_category_.yml
@@ -0,0 +1,3 @@
+label: Navigation
+collapsed: false
+position: 2
diff --git a/website/docs/components/navigation/breadcrumbs/_category_.yml b/website/docs/components/navigation/breadcrumbs/_category_.yml
new file mode 100644
index 000000000000..29068560f408
--- /dev/null
+++ b/website/docs/components/navigation/breadcrumbs/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_breadcrumbs_overview
diff --git a/website/docs/components/navigation/breadcrumbs/overview.mdx b/website/docs/components/navigation/breadcrumbs/overview.mdx
new file mode 100644
index 000000000000..b9d2dcb2b625
--- /dev/null
+++ b/website/docs/components/navigation/breadcrumbs/overview.mdx
@@ -0,0 +1,67 @@
+---
+id: component_breadcrumbs_overview
+title: Breadcrumbs
+slug: /components/breadcrumbs
+export_name: EuiBreadcrumbs
+---
+
+**EuiBreadcrumbs** let the user track their progress within and back out of a UX flow and work well when used
+in combination with [**EuiPageHeader**](#/layout/page-header). They are meant to be used at lower page level flows,
+while [**EuiHeaderBreadcrumbs**](#/layout/header) should be used for application-wide navigation.
+
+**EuiBreadcrumbs** requires an array of **EuiBreadcrumb** objects as `breadcrumbs` and handles truncation,
+including middle-truncation in the case of many items, and mobile responsiveness. Each item accepts an `href` prop,
+though we recommend the last item represent the current page and therefore the link is unnecessary.
+
+:::warning
+
+For accessibility, it is highly recommended to provide a descriptive `aria-label` for each set of breadcrumbs.
+
+:::
+
+## Limit the number of breadcrumbs
+
+Use the `max` prop to collapse breadcrumbs beyond a certain number.
+The center breadcrumbs will collapse into a single item allowing the user to navigate these items from within a popover.
+
+## Truncate each breadcrumb
+
+**EuiBreadcrumbs** will truncate the full set by default, forcing it to a single line and setting a max width
+on all items except for the last. You can turn this off by setting `truncate={false}`.
+
+Alternatively, you can force truncation on single breadcrumb **item** by adding `truncate: true` to the object.
+
+## Responsive
+
+**EuiBreadcrumbs** are `responsive` by default and will collapse breadcrumbs on narrower screens.
+Setting `responsive={false}` will keep all breadcrumbs visible at all screens sizes.
+
+Alternatively, you can change number of breadcrumbs that show per breakpoint by passing a custom responsive object.
+
+## Popover content
+
+If you want a breadcrumb that toggles a popover, e.g. for an account switcher, you can use the `popoverContent` prop
+for this purpose. **EuiBreadcrumbs** will automatically handle rendering a popover indicator and popover accessibility
+best practies for you. We recommend using components such as [**EuiContextMenu**](#/navigation/context-menu)
+or [**EuiListGroup**](#/display/list-group) for displaying popover options,
+or potentially [**EuiSelectable**](#/forms/selectable) if you have many items that require filtering.
+
+You may also pass `popoverProps` with almost any prop that [**EuiPopover**](#/layout/popover) accepts,
+such as customizing `panelPaddingSize` or `anchorPosition`. However, props that affect popover state
+such as `closePopover`, `isOpen`, and `button` are not accepted as they are controlled automatically
+by **EuiBreadcrumbs**.
+
+:::warning
+
+Please note that creating a breadcrumb with a popover will nullify any passed `href` or `onClick` behavior,
+as the _only_ interaction the breadcrumb should have at that point is the popover toggle.
+
+:::
+
+## Color for emphasis
+
+Each breadcrumb extends the color options from [**EuiLink**](#/navigation/link) when either an `href` or `onClick`
+is applied . You can change the default color of a breadcrumb to add emphasis or indicate state like `'danger'`
+for an error. However, use caution not to use color alone.
+
+Please also note that link colors cannot be overriden for `type="application"` breadcrumbs.
diff --git a/website/docs/components/navigation/button/_category_.yml b/website/docs/components/navigation/button/_category_.yml
new file mode 100644
index 000000000000..c8a84430e98e
--- /dev/null
+++ b/website/docs/components/navigation/button/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_button_overview
diff --git a/website/docs/components/navigation/button/overview.mdx b/website/docs/components/navigation/button/overview.mdx
new file mode 100644
index 000000000000..848b5b310bbd
--- /dev/null
+++ b/website/docs/components/navigation/button/overview.mdx
@@ -0,0 +1,108 @@
+---
+id: component_button_overview
+title: Button
+slug: /components/button
+export_name:
+ - EuiButton
+ - EuiButtonIcon
+ - EuiButtonEmpty
+---
+
+EUI provides many types, colors and configurations of buttons. The one best suited for you context depends on placement,
+prominence, and state. For primary and secondary actions it is best to use the basic **EuiButton**.
+For tertiary or low prominence actions, use **EuiButtonEmpty**.
+
+Be sure to read the full [button usage guidelines](#/guidelines/button).
+
+## Basic button
+
+The most standard button component is **EuiButton** which comes in two styles and two sizes. The `fill` style should be reserved for the main action and limited in number for a single page. Use the small size (`size="s"`) when placing buttons into smaller containers like popovers.
+
+When using colors other than `primary`, be sure that either the words or an icon also represents the status. For instance, don't rely on color alone to represent dangerous actions but use words like "Delete" not "Confirm". The `text` and `accent` colors should be used sparingly as they can easily be confused with other states like disabled and danger.
+
+## Empty button
+
+Use **EuiButtonEmpty** when you want to reduce the importance of the button, but still want to align it to the rest of the buttons. It is also the only button component that supports down to size `xs`.
+
+## Flush empty button
+
+When aligning **EuiButtonEmpty** components to the left or the right, you should make sure they’re flush with the edge of their container, so that they’re horizontally aligned with the other content in the container.
+
+## Buttons with icons
+
+All button components accept an `iconType` which must be an acceptable [**EuiIcon**](#/display/icons) type. Multi-color icons like app icons will be converted to single color. Icons can be displayed on the opposite side by passing `iconSide="right"`.
+
+## Icon buttons
+
+An **EuiButtonIcon** is a button that only contains an icon (no text). Use the `display` and `size` props to match the appearance of your **EuiButtonIcon** to other standard buttons. By default they will appear as `xs`, `empty` buttons.
+
+:::warning
+
+
+**EuiButtonIcon** requires an `aria-label` to express the meaning to screen readers.
+
+
+:::
+
+## Buttons as links
+
+Every button component accepts either an `href` (rendered as an `
`) or an `onClick` (rendered as a ``).
+While they also accept both props to be applied simultaneously to support certain routing mechansims,
+it is not usually recommended. For more specific information on how to integrate EUI buttons with react-router,
+[see this wiki page](https://github.com/elastic/eui/blob/main/wiki/consuming-eui/react-router.md#how-react-router-works).
+
+If you are creating a purely text-based link, like the one in the previous paragraph,
+use [**EuiLink**](#/navigation/link) instead.
+
+## Loading state
+
+Setting the `isLoading` prop to true will add the loading spinner or swap the existing icon for the loading spinner
+and set the button to disabled. It is good practice to also rename the button to "Loading…".
+
+## Split buttons
+
+EUI [does not support](https://github.com/elastic/eui/issues/4171) split buttons specifically. Instead,
+we recommend using separate buttons for the main and overflow actions. You can achieve this by simply using
+the `display` and `size` props **EuiButtonIcon** to match that of the primary action button.
+
+## Toggle buttons
+
+You can create a toggle button with any button type like the standard **EuiButton**, **EuiButtonEmpty**,
+or **EuiButtonIcon**. Use state management to handle the visual differences for on and off.
+Though there are two **exclusive** situations to consider.
+
+1. If your button changes its readable **text**, via children or `aria-label`,
+then there is no additional accessibility concern.
+
+2. If your button only changes the **visual** appearance, you must add `aria-pressed` passing a boolean
+for the on and off states. All EUI button types provide a helper prop for this called `isSelected`.
+
+:::warning
+
+Do not add `aria-pressed` or `isSelected` if you also change the readable text.
+
+:::
+
+## Button groups
+
+An **EuiButtonGroup** is for indicating **selection** only. They utilize the `type="single"` or `"multi"`
+prop to determine whether multiple or only single selections are allowed per group.
+
+:::warning
+
+In order for groups to be properly read as groups with a title, the `legend` prop is **required**.
+This is only for accessibility, however, so it will be visibly hidden.
+
+:::
+
+### Icon only button groups
+
+If you're just displaying a group of icons, add the prop `isIconOnly`.
+
+### Button groups in forms
+
+When using button groups within compressed forms, match the form elements by adding `buttonSize="compressed"`.
+Compressed groups should always be `fullWidth` so they line up nicely in their small container **unless** they are icon only.
+
+For a more detailed example of how to integrate with forms,
+see the ["Complex example"](#/forms/compressed-forms#complex-example) on the compressed forms page.
diff --git a/website/docs/components/navigation/collapsible_nav/_category_.yml b/website/docs/components/navigation/collapsible_nav/_category_.yml
new file mode 100644
index 000000000000..5cd2413ada3e
--- /dev/null
+++ b/website/docs/components/navigation/collapsible_nav/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_collapsible_nav_overview
diff --git a/website/docs/components/navigation/collapsible_nav/overview.mdx b/website/docs/components/navigation/collapsible_nav/overview.mdx
new file mode 100644
index 000000000000..51213c8fcf0a
--- /dev/null
+++ b/website/docs/components/navigation/collapsible_nav/overview.mdx
@@ -0,0 +1,45 @@
+---
+id: component_collapsible_nav_overview
+title: Collapsible nav
+slug: /components/collapsible-nav
+export_name: EuiCollapsibleNav
+---
+
+This is a high level component that creates a flyout-style navigational pane.
+
+**EuiCollapsibleNav** is a custom implementation of [**EuiFlyout**](#/layout/flyout); the visibility of which must
+still be maintained by the consuming application. An extra feature that it provides is the ability to `dock` the flyout.
+This affixes the flyout to the window and pushes the body content by adding left side padding.
+
+:::note
+
+Docking is not possible on small screens because it would force less real estate for the page content.
+
+:::
+
+## Collapsible nav group
+
+An **EuiCollapsibleNavGroup** adds some basic borders and `background` color of `none`, `light`, or `dark`.
+Give each section a heading by providing an optional `title` and `iconType`. Make the section collapsible
+([accordion style](#/layout/accordion)) with `isCollapsible=true`.
+
+When in `isCollapsible` mode, a `title` and `initialIsOpen:boolean` is required.
+
+## Nav groups with lists and other content
+
+**EuiCollapsibleNavGroups** can contain any children.
+They work well with [**EuiListGroup, EuiPinnableListGroup**](#/display/list-group)
+and simple [**EuiText**](#/navigation/link).
+
+Below are a few established patterns to use.
+
+## Full pattern with header and saved pins
+
+### Putting it all together
+
+The button below will launch a fullscreen example that includes [**EuiHeader**](#/layout/header) with a toggle button
+to open an **EuiCollapsibleNav**. The contents of which are multiple **EuiCollapsibleNavGroups** and saves
+the open/closed/pinned state for each section and item in local store.
+
+This is just a pattern and should be treated as such. Consuming applications will need to create the navigation groups
+according to their context and save the states as is appropriate to their data store.
diff --git a/website/docs/components/navigation/combo_box/_category_.yml b/website/docs/components/navigation/combo_box/_category_.yml
new file mode 100644
index 000000000000..d60b8cd6c8a2
--- /dev/null
+++ b/website/docs/components/navigation/combo_box/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_combo_box_overview
diff --git a/website/docs/components/navigation/combo_box/overview.mdx b/website/docs/components/navigation/combo_box/overview.mdx
new file mode 100644
index 000000000000..86af671f6103
--- /dev/null
+++ b/website/docs/components/navigation/combo_box/overview.mdx
@@ -0,0 +1,127 @@
+---
+id: component_combo_box_overview
+title: Combo box
+slug: /components/combo-box
+export_name: EuiComboBox
+---
+
+Use a **EuiComboBox** when the input has so many options that the user needs to be able to search them,
+the user needs to be able to select multiple options, and/or the user should have the ability to specify a custom value
+in addition to selecting from a predetermined list. If you're unsure of which selection component to use,
+see [EUI's in-depth guide to selection components](https://github.com/elastic/eui/discussions/7049)
+for more information.
+
+:::note
+
+You must add an accessible label to each instance of **EuiComboBox**
+
+Labels can be created by wrapping the combo box in an **EuiFormRow** with a `label`, adding an `aria-label` prop,
+or passing a text node ID to the `aria-labelledby` prop.
+
+:::
+
+## Disabled
+
+Set the prop `isDisabled` to make the combo box disabled.
+
+## Case-sensitive matching
+
+Set the prop `isCaseSensitive` to make the combo box option matching case sensitive.
+
+## Virtualized
+
+**EuiComboBoxList** uses [react-window](https://github.com/bvaughn/react-window) to only render visible options
+to be super fast no matter how many options there are.
+
+## Containers
+
+This example demonstrates how the combo box works within containers. Because this component uses portals,
+it’s important that it works within other portal-using components.
+
+## Pill colors
+
+Useful for visualization or tagging systems. You can also pass a color in your option list. The color can be
+a hex value (like `#000`) or any other named color value accepted by the [**EuiBadge**](#/display/badge) component.
+
+## Option rendering
+
+There are two object properties you can add to enhance the content of your options, `option.prepend`
+and `option.append`. These will add nodes before and after the option label respectively, to both the dropdown option
+and selected pill. They will not be included in the searchable content as this only matches against the label property.
+
+### Custom dropdown content
+
+While it is best to stick to the `option.label`, `option.append`, and `option.prepend` props, you can pass
+a custom `renderOption` function which will pass back the single option `option` and the `searchValue`
+to use for highlighting.
+
+You can use the `value` prop of the `option` object to store metadata about the option for use in this callback.
+
+**Note:** virtualization (above) requires that each option have the same height. Ensure that you render the options
+so that wrapping text is truncated instead of causing the height of the option to change.
+
+## Truncation
+
+By default, **EuiComboBox** truncates long option text at the end of the string.
+You can use `truncationProps` and almost any prop that [**EuiTextTruncate**](#/utilities/text-truncation) accepts
+to configure this behavior. This can be configured at the **EuiComboBox** level, as well as by each individual option.
+
+## Groups
+
+You can group options together. The groups _won’t_ match against the search value.
+
+## Single selection
+
+To only allow the user to select a single option, provide the `singleSelection` prop.
+You may want to render the selected option as plain text instead of pill form.
+To do this, pass `singleSelection={{ asPlainText: true }}`
+
+## Single selection with prepended label
+
+`append` and `prepend` props only work if `singleSelection` prop is not set to `false` to avoid multi-lines
+that makes combobox height greater than that of `append` and `prepend`.
+
+## Single selection with custom options
+
+You can allow the user to select a single option and also allow the creation of custom options.
+To do that, use the `singleSelection` in conjunction with the `onCreateOption` prop.
+
+**Note:** Creating custom options might not be obvious to the user, so provide help text explaining
+that this option is available. You can also customize the custom option text by passing
+a text to `customOptionText` prop.
+
+## Disallowing custom options
+
+Leave out the `onCreateOption` prop to disallow the creation of custom options.
+
+## Custom options only, with validation
+
+Alternatively, provide the `noSuggestions` prop to hide the suggestions list and _only_
+allow the creation of custom options.
+
+## Async
+
+Use the `onSearchChange` code to handle searches asynchronously.
+Use the`isLoading` prop to let the user know that something async is happening.
+
+## With delimiter
+
+Pass a unique character to the `delimiter` prop to aid in option creation.
+This is best used when knowing that content may be pasted from elsewhere such as a comma separated list.
+
+## Sorting matches
+
+By default, the matched options will keep their original sort order.
+If you would like to prioritize those options that **start with** the searched string,
+pass `sortMatchesBy="startsWith"`to display those options at the top of the list.
+
+## Duplicate labels
+
+In general, it is not recommended to use duplicate labels on the options because the user has no way to distinguish
+between them. If you need duplicate labels, you will need to add a unique `key` for each option.
+
+## Accessible label with aria-labelledby
+
+Sometimes it’s preferable to label a combobox with a heading or paragraph.
+You can easily create a unique ID for a text element using the [HTML ID generator](/#/utilities/html-id-generator),
+then pass your unique ID to the `aria-labelledby` prop.
diff --git a/website/docs/components/navigation/context_menu/_category_.yml b/website/docs/components/navigation/context_menu/_category_.yml
new file mode 100644
index 000000000000..5634ea6fcb3b
--- /dev/null
+++ b/website/docs/components/navigation/context_menu/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_context_menu_overview
diff --git a/website/docs/components/navigation/context_menu/overview.mdx b/website/docs/components/navigation/context_menu/overview.mdx
new file mode 100644
index 000000000000..295c1e38fbf1
--- /dev/null
+++ b/website/docs/components/navigation/context_menu/overview.mdx
@@ -0,0 +1,44 @@
+---
+id: component_context_menu_overview
+title: Context menu
+slug: /components/context-menu
+export_name: EuiContextMenu
+---
+
+**EuiContextMenu** is a nested menu system useful for navigating complicated trees.It lives within
+an [**EuiPopover**](#/layout/popover) which itself can be wrapped around any component (like a button in this example).
+
+## Sizes
+
+**EuiContextMenu** supports a small and medium `size`. The default size is medium, `m`, and should be used for most
+menus and major actions such as top application menus. Use the smaller size, `s`, for a more compressed version
+containing minor actions or repeated menus like in **EuiTable** pagination.
+
+## With single panel
+
+Use **EuiContextMenuPanel** for simple, non-nested context menus. The below pagination example has no nesting and no title.
+
+:::note
+
+The selected context menu item should have an aria-current attribute
+
+**aria-current** tells screen readers which item is selected. Add an `aria-current="true"` attribute
+to `EuiContextMenuItem` when a context menu item is clicked or receives a keypress.
+
+:::
+
+## Displaying custom elements
+
+If you have custom content to show instead of a list of options, you can pass a React element
+as a child to **EuiContextMenuPanel**.
+
+## Using panels with mixed items & content
+
+Context menu panels can be passed React elements through the `content` prop instead of `items`.
+The panel will display your custom content without modification.
+
+If your panel contents have different widths or you need to ensure that a specific context menu panel
+has a certain width, add `width: [number of pixels]` to the panel tree.
+
+You can add separator lines in the `items` prop if you define an item as `{isSeparator: true}`.
+This will pass the rest of its fields as props to a [**EuiHorizontalRule**](#/layout/horizontal-rule) component.
diff --git a/website/docs/components/navigation/facet/_category_.yml b/website/docs/components/navigation/facet/_category_.yml
new file mode 100644
index 000000000000..289c9c5c7f6c
--- /dev/null
+++ b/website/docs/components/navigation/facet/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_facet_overview
diff --git a/website/docs/components/navigation/facet/overview.mdx b/website/docs/components/navigation/facet/overview.mdx
new file mode 100644
index 000000000000..bd5e198dcef1
--- /dev/null
+++ b/website/docs/components/navigation/facet/overview.mdx
@@ -0,0 +1,22 @@
+---
+id: component_facet_overview
+title: Facet
+slug: /components/facet
+export_name: EuiFacet
+---
+
+**EuiFacetButtons** are to be used when allowing lists with multiple search params to be filtered down
+by these particular params. They allow for an `icon` node and/or `quantity` to be passed.
+You can also indicate the current selection with `isSelected`. Other props include `isDisabled`
+and `isLoading` (which will swap the quantity indicator with a loading icon).
+
+## Facet layout
+
+Utilize the **EuiFacetGroup** wrapper to correctly layout multiple facets. You can supply a `layout` of either
+`horizontal` or `vertical` with the default being `vertical`. Be sure to contain vertical layouts in a skinny component
+or give it a max-width. You can also adjust the spacing between items with the `gutterSize` prop.
+
+Typically, each facet grouping should display similarly. For example, they should all have icons or be similar
+icon nodes (like avatars). It is up to you whether each group should be single or multi-selection.
+
+### Horizontal and large gutter
diff --git a/website/docs/components/navigation/key_pad_menu/_category_.yml b/website/docs/components/navigation/key_pad_menu/_category_.yml
new file mode 100644
index 000000000000..99fa4fc642be
--- /dev/null
+++ b/website/docs/components/navigation/key_pad_menu/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_key_pad_menu_overview
diff --git a/website/docs/components/navigation/key_pad_menu/overview.mdx b/website/docs/components/navigation/key_pad_menu/overview.mdx
new file mode 100644
index 000000000000..a55b8769702e
--- /dev/null
+++ b/website/docs/components/navigation/key_pad_menu/overview.mdx
@@ -0,0 +1,50 @@
+---
+id: component_key_pad_menu_overview
+title: Key pad menu
+slug: /components/key-pad-menu
+export_name: EuiKeyPadMenu
+---
+
+The **EuiKeyPadMenu** component presents **EuiKeyPadMenuItems** in a tiled format,
+with a fixed width which will accommodate three items and then wrap.
+
+**EuiKeyPadMenu** is just a wrapping element for creating the list elements but you must declare
+each **EuiKeyPadMenu** component manually.
+
+:::warning
+
+If the menu provides navigation for your application, wrap the **EuiKeyPadMenu**
+with `` with a ``.
+
+For single selection (radio) items, you must pass a singular `name` prop to each item to ensure
+they are grouped properly. Also, if you would like to hide the visible `` in favor of an screen-reader
+only solution, you can pass `ariaLegend` instead of `legend`.
diff --git a/website/docs/components/navigation/link/_category_.yml b/website/docs/components/navigation/link/_category_.yml
new file mode 100644
index 000000000000..3fe12be3bcc4
--- /dev/null
+++ b/website/docs/components/navigation/link/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_link_overview
diff --git a/website/docs/components/navigation/link/overview.mdx b/website/docs/components/navigation/link/overview.mdx
new file mode 100644
index 000000000000..9f836266831d
--- /dev/null
+++ b/website/docs/components/navigation/link/overview.mdx
@@ -0,0 +1,32 @@
+---
+id: component_link_overview
+title: Link
+slug: /components/link
+export_name: EuiLink
+---
+
+**EuiLink** is any anchor or button element that is designed to display nicely within a block of text.
+It also provides more anchor-specific styling onto links and makes sure they are accessible.
+
+## External links
+
+Setting `target="_blank"` defaults to `external={true}`. This adds an icon indicator instructing users that
+a new window will open. You can also manually apply this icon in case you handle the target behavior by other means.
+
+## Coloring links
+
+Like any other [button component](#/navigation/button), links can be passed a `color`. Note that the `ghost`
+type should only be used on dark backgrounds (regardless of theming) as it will always create a white link.
+
+## Disabled links
+
+When an **EuiLink** is passed an `onClick` method, and is not passed an `href`, it can optionally
+be set to`disabled` which disables the click behavior, and removes the link styling.
+
+## Link validation
+
+To make links more secure for users, **EuiLink** and other components that accept an `href` prop become disabled
+if that `href` uses the `javascript:` protocol. This helps protect consuming applications
+from cross-site scripting (XSS) attacks and mirrors React's
+[planned behavior(opens in a new tab or window)](https://github.com/facebook/react/blob/940f48b999a3131e77b2545bd7ae252ef27ae6d1/packages/react-dom/src/shared/sanitizeURL.js#L37)
+to prevent rendering of `javascript:` links.
diff --git a/website/docs/components/navigation/pagination/_category_.yml b/website/docs/components/navigation/pagination/_category_.yml
new file mode 100644
index 000000000000..03f71d4475f0
--- /dev/null
+++ b/website/docs/components/navigation/pagination/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_pagination_overview
diff --git a/website/docs/components/navigation/pagination/overview.mdx b/website/docs/components/navigation/pagination/overview.mdx
new file mode 100644
index 000000000000..ebc99f5e722a
--- /dev/null
+++ b/website/docs/components/navigation/pagination/overview.mdx
@@ -0,0 +1,59 @@
+---
+id: component_pagination_overview
+title: Pagination
+slug: /components/pagination
+export_name: EuiPagination
+---
+
+Some EUI components have pagination built-in, like [**EuiBasicTable**](#/tabular-content/tables),
+but for custom built paginated interfaces you can use **EuiPagination** manually.
+
+ExamplesGuidelines
+
+## Basic usage with many pages
+
+**EuiPagination** accepts a total `pageCount` and only shows up to 5 consecutive pages,
+with shortcuts to the first and/or last page. It also requires the parent component to maintain
+the current `activePage` and handle the `onPageClick`.
+
+:::warning
+
+
+For accessibility, it is highly recommended to provide a descriptive `aria-label` for each pagination set.
+
+
+:::
+
+## Few pages
+
+The UI simplifies when we have fewer than the maximum number of visible pages.
+
+## Centered pagination
+
+You can use [**EuiFlexGroup**](#/layout/flex) to center the pagination in a layout.
+
+## Compressed and responsive
+
+Use the `compressed` prop to minimize the horizontal footprint. This will replace the numbered buttons
+with static numbers and rely on the first, last, next and previous icon buttons to navigate.
+
+This is also the same display that will occur when `responsive` is **not** `false`.
+You can adjust the responsiveness by supplying an array of [named breakpoints](#/theming/breakpoints)
+to `responsive`. The default is `['xs', 's']`.
+
+## Indeterminate page count
+
+If the total number of pages cannot be accurately determined, you can pass `0` as the `pageCount`.
+This will remove the button numbers and rely solely on the arrow icon buttons for navigation.
+Without a total page count, the last page button will pass back `-1` for the `activePage`.
+
+## Table pagination
+
+You can use **EuiTablePagination** to create a combination "Rows per page" and pagination set,
+commonly used with [tables](#/tabular-content/tables#adding-pagination-to-a-table).
+If you pass `0` in as one of the `itemsPerPageOptions`, it will create a "Show all" option and hide the pagination.
+
+## Customizable pagination
+
+Or you can use [**EuiFlexGroup**](#/layout/flex) and [**EuiContextMenu**](#/navigation/context-menu#with-single-panel)
+to set up your own custom pagination layout.
diff --git a/website/docs/components/navigation/side_nav/_category_.yml b/website/docs/components/navigation/side_nav/_category_.yml
new file mode 100644
index 000000000000..5e01666c23f2
--- /dev/null
+++ b/website/docs/components/navigation/side_nav/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_side_nav_overview
diff --git a/website/docs/components/navigation/side_nav/overview.mdx b/website/docs/components/navigation/side_nav/overview.mdx
new file mode 100644
index 000000000000..c9dd2830f7f0
--- /dev/null
+++ b/website/docs/components/navigation/side_nav/overview.mdx
@@ -0,0 +1,66 @@
+---
+id: component_side_nav_overview
+title: Side nav
+slug: /components/side-nav
+export_name: EuiSideNav
+---
+
+**EuiSideNav** is a responsive menu system that usually sits on the left side of a page layout.
+It will expand to the width of its container. This is the same menu system used for the EUI documentation.
+
+Configure the content of a **EuiSideNav** by passing in an `items` prop. Refer to the source code
+for an example of this data structure’s anatomy.
+
+:::note
+
+The responsive behavior converts the list into an accordion style component with a mobile only button.
+
+You will need to pass a string to the prop `mobileTitle` to label the mobile button.
+
+:::
+
+## Side nav heading
+
+Since **EuiSideNav** renders a `` section element, it is recommended that the element contain a heading.
+Pass a string or node to the `heading` prop to display within an ``. Though you can also adjust this heading
+element with `headingProps.element`.
+
+If the heading is visually unnecessary for your application, pass `headingProps.screenReaderOnly` to ensure proper
+accessibility for those using assitive technology.
+
+:::note
+
+When providing a heading, this will then be the default display for the mobile button title.
+
+:::
+
+## Complex side nav
+
+**EuiSideNav** also supports multiple top level sections and deeply-nested tree-based data.
+
+We recommend being consistent with the use of the root level item and whether it is used solely for labelling a section.
+Intermixing linked and non-linked root items will confuse the user. Stay consistent throughout your entire
+application and platform.
+
+## Nested item options
+
+Typically, the children of nested items progressively shows as users traverse the pages themselves.
+However, you can bypass this functionality and force open items by setting `items[n].forceOpen = true`.
+
+Arrow indicators will show only if the item has children but **does not** have an interaction itself.
+The component will then handle the toggling of the displayed children as well.
+
+## Emphasized side nav sections
+
+Adding the `emphasize = true` prop to a **EuiSideNav** item will enhance the visual appearance of that section
+and its nested items. This is helpful for when you need to indicate a dynamic navigational item
+like a user-created object.
+
+:::note
+
+Extra style needed
+
+The emphasized nav item's background color extends beyond the horizontal bounds of the component to allow it to reach
+it's parents bounds. Be sure to add `overflow: hidden` to whichever container you'd like it to stop at.
+
+:::
diff --git a/website/docs/components/navigation/steps/_category_.yml b/website/docs/components/navigation/steps/_category_.yml
new file mode 100644
index 000000000000..815174c73f8d
--- /dev/null
+++ b/website/docs/components/navigation/steps/_category_.yml
@@ -0,0 +1,3 @@
+link:
+ type: doc
+ id: component_steps_overview
diff --git a/website/docs/components/navigation/steps/overview.mdx b/website/docs/components/navigation/steps/overview.mdx
new file mode 100644
index 000000000000..d0b052e3baae
--- /dev/null
+++ b/website/docs/components/navigation/steps/overview.mdx
@@ -0,0 +1,46 @@
+---
+id: component_steps_overview
+title: Steps
+slug: /components/steps
+export_name: EuiSteps
+---
+
+**EuiSteps** presents procedural content in a numbered outline format. It is best used when presenting instructional
+content that must be conducted in a particular order. It requires a `title` and `children` to be present
+and will automatically increment the step number based on the initial `firstStepNumber`.
+
+## Complex steps
+
+If you need to call out a set of substeps that are not lines of code, most likely a `