From eae6957ec3a647a8832da81d910877415fdd098b Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Tue, 12 Dec 2023 21:00:20 +0100
Subject: [PATCH 1/7] feat(website): add _category_.yml to docs/guidelines
 directory

---
 website/docs/guidelines/_category_.yml | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 website/docs/guidelines/_category_.yml

diff --git a/website/docs/guidelines/_category_.yml b/website/docs/guidelines/_category_.yml
new file mode 100644
index 00000000000..2b0848e7169
--- /dev/null
+++ b/website/docs/guidelines/_category_.yml
@@ -0,0 +1 @@
+label: Guidelines

From ab6ed43f1ce6f87cdaed8275552e2caee73482dc Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Tue, 12 Dec 2023 21:00:42 +0100
Subject: [PATCH 2/7] feat(website): disable `intro.md` sample file

---
 website/docs/intro.md | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 website/docs/intro.md

diff --git a/website/docs/intro.md b/website/docs/intro.md
deleted file mode 100644
index 3c546cf8792..00000000000
--- a/website/docs/intro.md
+++ /dev/null
@@ -1 +0,0 @@
-# Elastic UI

From 64ef2afb9e6b0c28e2b3b163f32049e40f356e21 Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Tue, 12 Dec 2023 21:06:28 +0100
Subject: [PATCH 3/7] feat(website): add a part of components docs

---
 website/docs/components/_category_.yml        |   1 +
 website/docs/components/combo_box.mdx         |  25 ----
 website/docs/components/layout/_category_.yml |   3 +
 .../layout/accordion/_category_.yml           |   3 +
 .../components/layout/accordion/overview.mdx  | 102 ++++++++++++++
 .../layout/bottom_bar/_category_.yml          |   3 +
 .../components/layout/bottom_bar/overview.mdx |  36 +++++
 .../components/layout/flex/_category_.yml     |   3 +
 .../docs/components/layout/flex/overview.mdx  | 105 +++++++++++++++
 .../components/layout/flyout/_category_.yml   |   3 +
 .../components/layout/flyout/overview.mdx     |  81 +++++++++++
 .../components/layout/header/_category_.yml   |   3 +
 .../components/layout/header/overview.mdx     |  96 +++++++++++++
 .../layout/horizontal_rule/_category_.yml     |   3 +
 .../layout/horizontal_rule/overview.mdx       |  14 ++
 .../components/layout/modal/_category_.yml    |   3 +
 .../docs/components/layout/modal/overview.mdx |  50 +++++++
 .../layout/page_header/_category_.yml         |   3 +
 .../layout/page_header/overview.mdx           |  48 +++++++
 .../components/layout/panel/_category_.yml    |   3 +
 .../docs/components/layout/panel/overview.mdx |  52 +++++++
 .../components/layout/popover/_category_.yml  |   3 +
 .../components/layout/popover/overview.mdx    | 102 ++++++++++++++
 .../layout/resizable_container/_category_.yml |   3 +
 .../layout/resizable_container/overview.mdx   | 116 ++++++++++++++++
 .../components/layout/spacer/_category_.yml   |   3 +
 .../components/layout/spacer/overview.mdx     |  10 ++
 .../docs/components/navigation/_category_.yml |   3 +
 .../navigation/breadcrumbs/_category_.yml     |   3 +
 .../navigation/breadcrumbs/overview.mdx       |  67 +++++++++
 .../navigation/button/_category_.yml          |   3 +
 .../components/navigation/button/overview.mdx | 108 +++++++++++++++
 .../navigation/collapsible_nav/_category_.yml |   3 +
 .../navigation/collapsible_nav/overview.mdx   |  45 +++++++
 .../navigation/combo_box/_category_.yml       |   3 +
 .../navigation/combo_box/overview.mdx         | 127 ++++++++++++++++++
 .../navigation/context_menu/_category_.yml    |   3 +
 .../navigation/context_menu/overview.mdx      |  44 ++++++
 .../navigation/facet/_category_.yml           |   3 +
 .../components/navigation/facet/overview.mdx  |  22 +++
 .../navigation/key_pad_menu/_category_.yml    |   3 +
 .../navigation/key_pad_menu/overview.mdx      |  50 +++++++
 .../components/navigation/link/_category_.yml |   3 +
 .../components/navigation/link/overview.mdx   |  32 +++++
 .../navigation/pagination/_category_.yml      |   3 +
 .../navigation/pagination/overview.mdx        |  59 ++++++++
 .../navigation/side_nav/_category_.yml        |   3 +
 .../navigation/side_nav/overview.mdx          |  66 +++++++++
 .../navigation/steps/_category_.yml           |   3 +
 .../components/navigation/steps/overview.mdx  |  46 +++++++
 .../components/navigation/tabs/_category_.yml |   3 +
 .../components/navigation/tabs/overview.mdx   |  39 ++++++
 .../navigation/tree_view/_category_.yml       |   3 +
 .../navigation/tree_view/overview.mdx         |  38 ++++++
 54 files changed, 1637 insertions(+), 25 deletions(-)
 create mode 100644 website/docs/components/_category_.yml
 delete mode 100644 website/docs/components/combo_box.mdx
 create mode 100644 website/docs/components/layout/_category_.yml
 create mode 100644 website/docs/components/layout/accordion/_category_.yml
 create mode 100644 website/docs/components/layout/accordion/overview.mdx
 create mode 100644 website/docs/components/layout/bottom_bar/_category_.yml
 create mode 100644 website/docs/components/layout/bottom_bar/overview.mdx
 create mode 100644 website/docs/components/layout/flex/_category_.yml
 create mode 100644 website/docs/components/layout/flex/overview.mdx
 create mode 100644 website/docs/components/layout/flyout/_category_.yml
 create mode 100644 website/docs/components/layout/flyout/overview.mdx
 create mode 100644 website/docs/components/layout/header/_category_.yml
 create mode 100644 website/docs/components/layout/header/overview.mdx
 create mode 100644 website/docs/components/layout/horizontal_rule/_category_.yml
 create mode 100644 website/docs/components/layout/horizontal_rule/overview.mdx
 create mode 100644 website/docs/components/layout/modal/_category_.yml
 create mode 100644 website/docs/components/layout/modal/overview.mdx
 create mode 100644 website/docs/components/layout/page_header/_category_.yml
 create mode 100644 website/docs/components/layout/page_header/overview.mdx
 create mode 100644 website/docs/components/layout/panel/_category_.yml
 create mode 100644 website/docs/components/layout/panel/overview.mdx
 create mode 100644 website/docs/components/layout/popover/_category_.yml
 create mode 100644 website/docs/components/layout/popover/overview.mdx
 create mode 100644 website/docs/components/layout/resizable_container/_category_.yml
 create mode 100644 website/docs/components/layout/resizable_container/overview.mdx
 create mode 100644 website/docs/components/layout/spacer/_category_.yml
 create mode 100644 website/docs/components/layout/spacer/overview.mdx
 create mode 100644 website/docs/components/navigation/_category_.yml
 create mode 100644 website/docs/components/navigation/breadcrumbs/_category_.yml
 create mode 100644 website/docs/components/navigation/breadcrumbs/overview.mdx
 create mode 100644 website/docs/components/navigation/button/_category_.yml
 create mode 100644 website/docs/components/navigation/button/overview.mdx
 create mode 100644 website/docs/components/navigation/collapsible_nav/_category_.yml
 create mode 100644 website/docs/components/navigation/collapsible_nav/overview.mdx
 create mode 100644 website/docs/components/navigation/combo_box/_category_.yml
 create mode 100644 website/docs/components/navigation/combo_box/overview.mdx
 create mode 100644 website/docs/components/navigation/context_menu/_category_.yml
 create mode 100644 website/docs/components/navigation/context_menu/overview.mdx
 create mode 100644 website/docs/components/navigation/facet/_category_.yml
 create mode 100644 website/docs/components/navigation/facet/overview.mdx
 create mode 100644 website/docs/components/navigation/key_pad_menu/_category_.yml
 create mode 100644 website/docs/components/navigation/key_pad_menu/overview.mdx
 create mode 100644 website/docs/components/navigation/link/_category_.yml
 create mode 100644 website/docs/components/navigation/link/overview.mdx
 create mode 100644 website/docs/components/navigation/pagination/_category_.yml
 create mode 100644 website/docs/components/navigation/pagination/overview.mdx
 create mode 100644 website/docs/components/navigation/side_nav/_category_.yml
 create mode 100644 website/docs/components/navigation/side_nav/overview.mdx
 create mode 100644 website/docs/components/navigation/steps/_category_.yml
 create mode 100644 website/docs/components/navigation/steps/overview.mdx
 create mode 100644 website/docs/components/navigation/tabs/_category_.yml
 create mode 100644 website/docs/components/navigation/tabs/overview.mdx
 create mode 100644 website/docs/components/navigation/tree_view/_category_.yml
 create mode 100644 website/docs/components/navigation/tree_view/overview.mdx

diff --git a/website/docs/components/_category_.yml b/website/docs/components/_category_.yml
new file mode 100644
index 00000000000..93fd4ef916f
--- /dev/null
+++ b/website/docs/components/_category_.yml
@@ -0,0 +1 @@
+label: Components
diff --git a/website/docs/components/combo_box.mdx b/website/docs/components/combo_box.mdx
deleted file mode 100644
index d299ba1e0eb..00000000000
--- a/website/docs/components/combo_box.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
----
-title: EuiComboBox
-slug: combo-box
----
-
-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.
-
-:::info Accessibility
-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.
-:::
-
-<iframe src="https://eui.elastic.co/storybook/iframe.html?id=euicombobox--playground&viewMode=story" width="100%" />
-
-## Disabled
-
-Set the prop `isDisabled` to make the combo box disabled.
-
-<iframe src="https://eui.elastic.co/storybook/iframe.html?args=isDisabled:!true&id=euicombobox--playground&viewMode=story" width="100%" />
diff --git a/website/docs/components/layout/_category_.yml b/website/docs/components/layout/_category_.yml
new file mode 100644
index 00000000000..33337167006
--- /dev/null
+++ b/website/docs/components/layout/_category_.yml
@@ -0,0 +1,3 @@
+label: Layout
+collapsed: false
+position: 1
diff --git a/website/docs/components/layout/accordion/_category_.yml b/website/docs/components/layout/accordion/_category_.yml
new file mode 100644
index 00000000000..5eb646478c9
--- /dev/null
+++ b/website/docs/components/layout/accordion/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_accordion_overview
diff --git a/website/docs/components/layout/accordion/overview.mdx b/website/docs/components/layout/accordion/overview.mdx
new file mode 100644
index 00000000000..1e63bd0ba3a
--- /dev/null
+++ b/website/docs/components/layout/accordion/overview.mdx
@@ -0,0 +1,102 @@
+---
+id: component_accordion_overview
+title: Accordion
+export_name: EuiAccordion
+slug: /components/accordion
+---
+
+## Simple and unstyled
+
+**EuiAccordion** has been purposely designed with minimal styles, allowing you to visually enhance it as needed
+(see the accordion form example). The only styling enforced by EUI is the caret icon, which indicates to users
+that the item can be opened.
+
+A `buttonContent` prop defines the content of the clickable area. On click it will expose the children
+and animate based on the height of those children.
+
+For styling needs, classes can be individually applied with `className` (for the entire accordion),
+and `buttonClassName` (for the clickable area).
+
+## Arrow display
+
+The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering
+button text. If you must hide or change the side in which the arrow appears, use `arrowDisplay: 'right'` or `'none'`
+
+## Multiple accordions
+
+Use any number of **EuiAccordion** elements to visually display them as a group.
+
+Due to the previously mentioned bare styles, it is recommended to place an [**EuiSpacer**](#/layout/spacer) between
+accordion items. Padding within each accordion item can be applied via the `paddingSize` prop.
+
+## Extra actions
+
+Use the `extraAction` prop to pass an extra action displayed on the right of any accordion. Usually this is a delete
+or button, but can be anything. Note that this action is separate from the click state that expands the accordion.
+This is needed to make it accessible.
+
+## Opened on initial render
+
+Use the `initialIsOpen` prop to open the accordion when first rendered.
+
+## Controlling toggled state
+
+Typically, the open and closed state of **EuiAccordion** is maintained by the component's internal state.
+Though, you can manually control it with:
+
+*   `forceState`: Accepts either `'open'` or `'closed'`.
+*   `onToggle`: A callback function returning `true` if the accordion is open
+
+## Loading state
+
+Use the `isLoading` prop when not all of the accordion's content is ready yet.
+When using `isLoading`, the content of `extraAction` is replaced with a loading spinner.
+
+Manage the content of the accordion using `isLoadingMessage`. By default, it is set to `false` and the content
+will remain unaltered. Set it to `true` to show a default loading message or pass a node to show
+a custom loading message.
+
+## Disabled state
+
+In some cases you might want to prevent the user from closing the **EuiAccordion**. For example, if a form field
+is displaying an error, opening the accordion and preventing its closure until the error has been addressed
+will help the user find and fix the error.
+
+The `isDisabled` prop will disable interaction on the button and the arrow. Use it in conjunction
+with `initialIsOpen` to achieve the desired effect.
+
+:::warning
+
+When disabling the interaction of accordions based on user input, it's advisable to ensure there is further explanation
+through the use of help or error text.
+
+:::
+
+## When content changes dynamically
+
+If an accordion’s content changes height while the accordion is open, it will resize dynamically.
+
+## Interactive content in the trigger
+
+Passing interactive content like links, buttons, or form elements as the `buttonContent`,
+will cause issues with the wrapping button element. To fix this, you can change this wrapping element
+to a div using `buttonElement="div"`.
+
+If you don't want the interactive content to trigger the accordion expansion,
+you will have to apply `e.stopPropagation()` to your element manually.
+
+:::warning
+
+Accordions need a focusable button for accessibility, so changing the element to anything other than a button will enforce the display of the arrow.
+
+:::
+
+## Styled for forms
+
+Accordions are unstyled by default, but **EuiAccordion** supports several props around padding sizes and borders,
+as well as letting you pass in your own custom CSS styles. See the snippet tab below for a quick preview of said props,
+and the and the demo code tab below for custom hover and focus CSS overrides.
+
+We also recommend creating a fieldset/legend combination for better accessibility and DOM structure by passing
+`element="fieldset"`. This will set the entire accordion as a `<fieldset>` and automatically change
+the `buttonElement` to a `<legend>`.
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 00000000000..a26163a9efd
--- /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 00000000000..1a0869f787a
--- /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 `<body>` 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 00000000000..1e69486d0f0
--- /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 00000000000..05084865449
--- /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 `<div />` or `<span />`.
+
+## Spans instead of divs
+
+Specify `component=“span”` on **EuiFlexGroup** and/or **EuiFlexItem** to change from the default `div`.
+
+## Panels grow to fill flex items
+
+The [**EuiPanel**](#/layout/panel) component will naturally grow to fill the **EuiFlexItem** which contains it.
+
+## Turn off item stretching
+
+Sometimes you do not want a **EuiFlexItem** to grow horizontally. It can be turned off for each item individually.
+
+## Proportional widths of items
+
+You can specify a number between 1 and 10 for each **EuiFlexItem** to take up a proportional percentage
+of the **EuiFlexGroup** it is in.
+
+## Justify and align
+
+**EuiFlexGroups** have the props `justifyContent` and `alignItems` that accept
+[normal flexbox parameters](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container).
+Below are some common scenarios, where you need to separate two items, center justify a single one,
+or center an item vertically. Note the usage of **EuiFlexItems** with `grow=false` so that they do not stretch.
+
+## Allowing flex items to wrap
+
+You can set `wrap` on **EuiFlexGroup** if it contains **EuiFlexItems** with minimum widths,
+which you want to wrap as the container becomes narrower.
+
+## Change direction
+
+You can change direction using the `direction` prop.
+
+## Responsive flex groups
+
+By default **EuiFlexGroup** is responsive by always stacking the items on smaller screens.
+However, often you only want to use groups for alignment and margins, rather than layouts.
+Simply apply the `responsive={false}` prop to retain a single row layout for the group.
+
+## Flex grids are for repeatable items
+
+**EuiFlexGrid** is a more rigid component that sets multiple, wrapping rows of same width items.
+You can set a `columns` prop to specify anywhere between 1-4 columns. Any more would likely break on laptop screens.
+
+## Flex grids can change direction
+
+Adding `direction="column"` will re-orient the flex items so they display top-down **then** left to right.
+
+## Responsive flex grids
+
+**EuiFlexGrid** is also similarly responsive by default, responsive by always stacking the items vertically
+on smaller screens. However, should you want to customize the number of items on small or large screens, we recommend
+applying the `responsive={false}` prop and then conditionally pass a column number based on the current breakpoint.
+
+## Flex grids and flex groups can nest
+
+**EuiFlexGroup** and **EuiFlexGrid** can nest within themselves indefinitely.
+For example, here we turn off the growth on a **EuiFlexGroup**, then nest a grid inside of it.
+
+:::warning
+
+Flex items are also a flexbox
+
+To support nested stretching of items, **EuiFlexItem** also has `display: flex` on it so if your children
+are not behaving correctly, you may want to wrap them in a `<div />`.
+
+:::
+
+## 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 00000000000..b89fbbcb4ff
--- /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 00000000000..e2a0da7d6e9
--- /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 00000000000..0590438075b
--- /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 00000000000..2b9f7dc1659
--- /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 00000000000..f7912d81373
--- /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 00000000000..11a1beced09
--- /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 `<hr>` element.
+It can be one of three provided sizes (lengths), by default it will be `full`.
+
+## Margins
+
+The spacing added before and after **EuiHorizontalRule** can be adjusted using the `margin` prop.
+Don’t forget that margins will collapse against items that proceed and/or follow.
diff --git a/website/docs/components/layout/modal/_category_.yml b/website/docs/components/layout/modal/_category_.yml
new file mode 100644
index 00000000000..93c6fc6f25d
--- /dev/null
+++ b/website/docs/components/layout/modal/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_modal_overview
diff --git a/website/docs/components/layout/modal/overview.mdx b/website/docs/components/layout/modal/overview.mdx
new file mode 100644
index 00000000000..b2c55d9b498
--- /dev/null
+++ b/website/docs/components/layout/modal/overview.mdx
@@ -0,0 +1,50 @@
+---
+id: component_modal_overview
+title: Modal
+slug: /components/modal
+export_name:
+  - EuiModal
+  - EuiOverlayMask
+---
+
+A modal works best for focusing users' attention on a **short** amount of content and getting them to make a decision.
+Use it to temporarily interrupt a user’s current task and block interactions to the content below it.
+
+If your modal content is more complex, or requires considerable time to complete,
+consider using an [**EuiFlyout**](#/layout/flyout) instead.
+
+ExamplesGuidelines
+
+Each **EuiModal** requires a specific set of nested child components.
+They can be omitted if necessary, but the order cannot be changed or interrupted.
+
+Modals come a wrapping **EuiOverlayMask** to obscure the content beneath, but unlike [flyouts](#/layout/flyout),
+modals cannot be dismissed by clicking on the overlay mask. This is inline with
+our [modal usage guidelines](#/layout/modal/guidelines) which requires there to be a primary action button,
+even if that button simply closes the modal.
+
+## Forms in a modal
+
+Since the child components of **EuiModal** are required to be in a specific order, you can only wrap the contents
+within **EuiModalBody** with the `<form />` element. You can then hook up your submit button inside **EuiModalFooter**
+by adding the `id` of the `<form />` element to the `form` prop of the button.
+
+## Confirm modal
+
+Use the **EuiConfirmModal** to ask the user to confirm a decision. It is a contextual wrapper around **EuiModal**
+that provides some helpful props for filling in common modal pieces. By default, the button color indicates a positive
+or neutral action. Change the `buttonColor` property to `danger` to indicate a destructive action.
+
+## Loading and disabling confirm button
+
+**EuiConfirmModal** supports being able to apply loading and disabled states to the confirm button
+with the `confirmButtonDisabled` and `isLoading` props respectively. This is helpful to indicate the fetching
+of data and/or to wait for a user's input before enabling the confirm action.
+
+## Widths
+
+Modals start with a minimum width of `400px`, just enough to display form rows. They will grow to fit the contents
+until it reaches the specified `maxWidth`, the default of which is set to the medium breakpoint.
+
+If the modal is not growing wide enough to fit your contents, you can pass a specific `style.width`,
+just remember that modals will always shrink to fit the window width.
diff --git a/website/docs/components/layout/page_header/_category_.yml b/website/docs/components/layout/page_header/_category_.yml
new file mode 100644
index 00000000000..5abdb23d385
--- /dev/null
+++ b/website/docs/components/layout/page_header/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_page_header_overview
diff --git a/website/docs/components/layout/page_header/overview.mdx b/website/docs/components/layout/page_header/overview.mdx
new file mode 100644
index 00000000000..2821d6ab2c1
--- /dev/null
+++ b/website/docs/components/layout/page_header/overview.mdx
@@ -0,0 +1,48 @@
+---
+id: component_page_header_overview
+title: Page header
+slug: /components/page-header
+export_name: EuiPageHeader
+---
+
+While the **EuiPageHeader** component can be placed anywhere within your page layout, we recommend using it within
+the [**EuiPageTemplate**](#/templates/page-template) component by passing the configuration props as its `pageHeader`.
+
+**EuiPageHeader** provides props for opinionated, consistent formatting of your header.
+Any combination of `pageTitle`, `description`, `tabs`, or any `children` will adjust the layout as needed.
+
+An additional prop `rightSideItems` allows for a simple **array of nodes** which will layout in a flexbox row.
+This is commonly used for adding multiple buttons, of which, at least one should be primary (adding `fill="true"`).
+These items are also displayed in **reverse order** so that the first and primary array item will be displayed
+on the far right.
+
+You can further adjust the display of these content types with an optional `iconType` placed to the left of the title,
+`alignItems` for adjusting the vertical alignment of the two sides, and `responsiveOrder` to determine which content
+side to display first on smaller screens.
+
+
+## Tabs in the page header
+
+A set of `tabs` can be displayed inside the page header by passing an array of [**EuiTab**](#/navigation/tabs) objects
+using the `label` key for the tab content. When displaying tabs, the `bottomBorder` prop will be enforced to create
+separation of the header and content. You'll still need to manage the page content and selected
+tab in your own instance.
+
+When supplying `tabs` without a `pageTitle`, **EuiPageHeader** will promote those tabs as if they are the page title.
+This means that any `description` or `children` will sit **below** the tabs and should used to describe
+the currently selected tab.
+
+## Breadcrumbs in the page header
+
+[Breadcrumbs](#/navigation/breadcrumbs) are useful for tracking in-page flows that **are not part of the entire
+application architecture**. To make this easy **EuiPageHeader** provides a `breadcrumbs` prop that accepts
+the same configuration as `EuiBreadrumbs.breadcrumbs`.
+
+A common pattern is to use a single breadcrumb to return the user to a listing page from which the current
+page was navigated to.
+
+## Customizing the page header
+
+The page header content props are helpful props to push content into established Elastic page layout patterns.
+They are completely optional and by design, inflexible. If you need a layout that does not match these patterns
+you can pass in your own `children` utilizing the **EuiPageHeaderSection** components.
diff --git a/website/docs/components/layout/panel/_category_.yml b/website/docs/components/layout/panel/_category_.yml
new file mode 100644
index 00000000000..2e2b4243c47
--- /dev/null
+++ b/website/docs/components/layout/panel/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_panel_overview
diff --git a/website/docs/components/layout/panel/overview.mdx b/website/docs/components/layout/panel/overview.mdx
new file mode 100644
index 00000000000..871ed31fe6c
--- /dev/null
+++ b/website/docs/components/layout/panel/overview.mdx
@@ -0,0 +1,52 @@
+---
+id: component_panel_overview
+title: Panel
+slug: /components/panel
+export_name: EuiPanel
+---
+
+**EuiPanel** is a building block component. Use it as a layout helper for containing content.
+It is also commonly used as a base for other larger components like [**EuiPage**](#/templates/page-template),
+[**EuiPopover**](#/layout/popover) and [**EuiCard**](#/display/card).
+
+## Padding
+
+The most basic use is to simply add padding around your content.
+
+## Shadow and border
+
+**EuiPanel** can give depth to your container with `hasShadow` while `hasBorder` can add containment.
+Just be sure not to include too many [nested panels](#/layout/panel/guidelines) with these settings.
+
+:::warning
+
+Certain allowed combinations of shadow, border, and color depend on the current theme.
+
+For instance, only plain or transparent panels can have a border and/or shadow.
+The default theme doesn't allow combining the `hasBorder` option with `hasShadow`.
+
+:::
+
+## Colors and corners
+
+Use `color` to add background shading to your panel and provide an additional helpful aesthetic
+to your container in context. Be mindful to use color sparingly. You can also remove the rounded corners
+depending on the placement of your panel with `borderRadius="none"`
+
+Passing `color="transparent"` can give you a quick empty box simply for adding padding to all sides.
+
+## Growing height
+
+Using **EuiPanel** in an [**EuiFlexItem**](#/layout/flex#panels-grow-to-fill-flex-items) will always grow
+its height to match. This is great for rows of panels. However, you can also turn this feature off
+by setting `grow={false}`.
+
+## Split panels
+
+**EuiSplitPanel** is a composition of an outer and multiple inner **EuiPanels**. It is a namespaced component
+that you consume using `EuiSplitPanel.Outer` and `EuiSplitPanel.Inner` respectively. You can supply the same panel
+props to both components with the exception of a few to ensure the visual layout is correct.
+It also has two directions, `column` (default) and `row`.
+
+For custom responsiveness, you can adjust at which breakpoints a `row` layout will stack by passing
+a new array of breakpoint names `['xs', 's']` to the `responsive` prop, or completely turn it off with `false`.
diff --git a/website/docs/components/layout/popover/_category_.yml b/website/docs/components/layout/popover/_category_.yml
new file mode 100644
index 00000000000..26bb9a24ce5
--- /dev/null
+++ b/website/docs/components/layout/popover/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_popover_overview
diff --git a/website/docs/components/layout/popover/overview.mdx b/website/docs/components/layout/popover/overview.mdx
new file mode 100644
index 00000000000..dbf4f9eb75b
--- /dev/null
+++ b/website/docs/components/layout/popover/overview.mdx
@@ -0,0 +1,102 @@
+---
+id: component_popover_overview
+title: Popover
+slug: /components/popover
+export_name: EuiPopover
+---
+
+Use the **EuiPopover** component to hide controls or options behind a clickable element.
+A popover is temporary so keep tasks simple and narrowly focused.
+
+While the visibility of the popover is maintained by the consuming application, popovers will automatically
+close when clicking outside of the popover bounds. Therefore all work done in a popover should automatically be saved.
+
+Avoid popover inception (popover triggering another popover),
+and instead use a [**EuiContextMenu**](#/navigation/context-menu) to swap the popover panel content.
+
+## Anchor position
+
+The alignment and arrow on your popover can be set with the `anchorPosition` prop.
+These positions will update based upon screen real estate.
+
+**Some tips:**
+
+*   The first word in the `anchorPosition` denotes where the popover will appear relative to the button.
+*   The second word in the `anchorPosition` denotes where the gravity / pin position
+    will appear relative to the popover.
+
+## Popover titles and footers
+
+Popovers often need titling. Use the **EuiPopoverTitle** component nested somewhere inside the popover contents.
+
+You can also add a similarly styled **EuiPopoverFooter** for smaller captions or call to action buttons.
+
+## Popover padding sizes
+
+Use the `panelPaddingSize` prop to adjust the padding of the panel content. When using popover titles and footers,
+this setting will propogate to them. Or you can supply a custom `paddingSize` to either the **EuiPopoverTitle**
+of **EuiPopoverFooter**.
+
+## Panel class name
+
+Use the `panelClassName` prop to pass a custom class to the panel containing the popover contents.
+
+## Popover with block level display
+
+Popover anchors default to `display: inline-block;` so they do not force a display on inline triggers.
+If you do need to change this, just add `display="block"`
+
+## Popover on a fixed element
+
+Popover content even works on `position: fixed;` elements. Add the `repositionOnScroll` boolean prop
+to ensure the popover realigns to the fixed button on scroll.
+
+## Constraining a popover inside a container
+
+**EuiPopover** can accept a React or DOM element as a `container` prop and restrict the popover
+from overflowing that container.
+
+## Popover attached to input element
+
+**EuiInputPopover** is a specialized popover component intended to be used with form elements.
+Stylistically, the popover panel is "attached" to the input. As a result, the popover will always try to set its width
+to match the width of the input, although this can be configured via `panelMinWidth`.
+
+Functionally, consumers have control over what events open and close the popover,
+and it can allow for natural tab order. Although some assumptions are made about keyboard behavior, consumers should
+provide specific key event handlers depending on the use case. For instance, a `type=text` input could use the down key
+to trigger popover opening, but this interaction would not be appropriate for `type=number` inputs as they natively
+bind to the down key.
+
+## Setting an initial focus
+
+If you want a specific child element of the popover to immediately gain focus when the popover is open,
+use the `initialFocus` prop to pass either a selector or DOM node.
+
+:::warning
+
+It can be jarring for keyboard and screen reader users to immediately land on an element with no other context.
+To alleviate this, ensure that your initial focus target makes sense alone or is the primary goal of the popover.
+
+:::
+
+## Custom outside click behavior
+
+If you do not wish the popover to auto-close on outside clicks, you can use `focusTrapProps`
+to customize this behavior. The below example triggers a confirmation modal which can leave the popover
+open if the user presses 'No'.
+
+## Removing the focus trap
+
+If the popover should not trap focus within itself, then you can remove it with `ownFocus={false}`.
+
+:::warning
+
+Removing `ownFocus` makes it difficult for keyboard-only and screen reader users to navigate to and from your popover.
+
+:::
+
+## Popover using an HTMLElement as the anchor
+
+**EuiWrappingPopover** is an extra popover component that allows any existing DOM element
+to be passed as the `button` prop.
diff --git a/website/docs/components/layout/resizable_container/_category_.yml b/website/docs/components/layout/resizable_container/_category_.yml
new file mode 100644
index 00000000000..f136fe3e0c9
--- /dev/null
+++ b/website/docs/components/layout/resizable_container/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_resizable_container_overview
diff --git a/website/docs/components/layout/resizable_container/overview.mdx b/website/docs/components/layout/resizable_container/overview.mdx
new file mode 100644
index 00000000000..6b86decdd5a
--- /dev/null
+++ b/website/docs/components/layout/resizable_container/overview.mdx
@@ -0,0 +1,116 @@
+---
+id: component_resizable_container_overview
+title: Resizable container
+slug: /components/resizable-container
+export_name: EuiResizableContainer
+---
+
+This component is handy for various resizable containers. **EuiResizableContainer** uses
+the [React Render Props](https://reactjs.org/docs/render-props.html#using-props-other-than-render) technique
+to provide **EuiResizablePanel** and **EuiResizableButton** components for layout, and `actions` for custom handling
+collapse and resize functionality in your app. Wrap parts of your content with the **EuiResizablePanel** component
+and put the **EuiResizableButton** component between.
+
+:::note
+
+Consider adding a tabIndex for keyboard accessibility
+
+Add a prop `tabIndex=0` to the **EuiResizableContainer** if it is a fixed height or has a lot of content.
+This ensures keyboard users can set focus on the container and scroll to the bottom using arrow keys.
+
+:::
+
+## Horizontal resizing
+
+Simple resizable container with two panels and a resizer between. This is the most common case you'll need in your app.
+Just drag **the resizer** button between two panels to increase/decrease panel size. You could also use arrow keys **←**|**→** on **the focused resizer** button to change panel size.
+
+*   add `initialSize` in percents to each panel to specify the initial size of it. Other calculations
+    will be encapsulated, you don't worry about it.
+*   add `scrollable=false` prop to a panel to eliminate overflow scrolling
+
+## Resizable panel options
+
+Each **EuiResizablePanel** is simply an **EuiPanel** wrapped with a `<div>` 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 00000000000..2d95877c05e
--- /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 00000000000..06b7301804b
--- /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 `<br />` 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 00000000000..d68255642ac
--- /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 00000000000..29068560f40
--- /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 00000000000..b9d2dcb2b62
--- /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 00000000000..c8a84430e98
--- /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 00000000000..848b5b310bb
--- /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 `<a>`) or an `onClick` (rendered as a `<button>`).
+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 00000000000..5cd2413ada3
--- /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 00000000000..51213c8fcf0
--- /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 00000000000..d60b8cd6c8a
--- /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 00000000000..86af671f610
--- /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 00000000000..5634ea6fcb3
--- /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 00000000000..295c1e38fbf
--- /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 00000000000..289c9c5c7f6
--- /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 00000000000..bd5e198dcef
--- /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 00000000000..99fa4fc642b
--- /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 00000000000..a55b8769702
--- /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 `<nav aria-label="Nav title"></nav>`.
+
+:::
+
+## Menu item
+
+The **EuiKeyPadMenuItem** component can act both as an anchor as well as a button by specifying
+`href` or `onClick` respectively. It requires a text-based `label` and `children` for declaring
+the [icon](#/display/icons). This is the most flexible way for handling the customization of the icon itself.
+
+When using the `isSelected` prop to create a toggle button, you must supply both the `true` and `false`
+states explicitly to ensure the attribute is added for both states.
+
+## Beta item
+
+If the item links to a module that is not GA (beta, lab, etc), you can add a `betaBadgeLabel`
+and `betaBadgeTooltipContent` to the card and it will properly create and position
+an [**EuiBetaBadge**](#/display/badge#beta-badge-type).
+
+Supplying just a label will only show the first letter in the badge but displays the full label to the tooltip.
+You can also pass an `iconType` to replace the letter.
+
+## Checkable
+
+**EuiKeyPadMenuItem**s can also be rendered as checkbox or radio form controls using the `checkable` prop.
+Pass in `"multi"` for checkboxes or `"single"` for radios.
+
+To ensure the **EuiKeyPadMenu** renders the semantically appropriate HTML elements, you will need to pass
+in the `checkable` prop as `true` or an object that requires a `legend`. This will wrap the input group
+in a `<fieldset>` with a `<legend>`.
+
+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 `<legend>` 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 00000000000..3fe12be3bcc
--- /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 00000000000..9f836266831
--- /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 00000000000..03f71d4475f
--- /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 00000000000..ebc99f5e722
--- /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 00000000000..5e01666c23f
--- /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 00000000000..c9dd2830f7f
--- /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 `<nav>` section element, it is recommended that the element contain a heading.
+Pass a string or node to the `heading` prop to display within an `<h2>`. 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 00000000000..815174c73f8
--- /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 00000000000..d0b052e3baa
--- /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 `<ol/>`,
+wrap the block in a `<EuiSubSteps/>`.
+
+## Heading elements
+
+To aid with accessibility and hierarchical headings, you can and should pass in a heading element
+to use for each step title. The example below shows that the logical heading element should be an `h2` and
+therefore adds `headingElement="h2"` to the EuiSteps component.
+
+The style of the title will **not** be affected.
+
+## Steps status
+
+Steps can optionally include `status` prop that will alter the look of the number prefix.
+The options are `incomplete`, `complete`, `warning`, `danger`, `disabled` and `loading`.
+This is used mostly as a final step when you need to make some sort of final check.
+
+## Custom title sizes
+
+You can set a different title size using `titleSize`. If `titleSize` is set in both **EuiSteps** and **EuiStep**,
+the latter value will override the former. Additionally, the title size `xs` will automatically
+generate smaller steps circles.
+
+## Horizontal steps
+
+For use when forms/setup instructions can and should be split into multiple pages.
+Each step should correspond to an individual page of form elements, using the `status` key to denote
+the user's progress.
+
+For horizontal steps, the `status` key defaults to `"incomplete"` and the default filled styling is reserved
+for indicating `"current"` status.
+
+Use the `size` property to generate smaller step circles.
diff --git a/website/docs/components/navigation/tabs/_category_.yml b/website/docs/components/navigation/tabs/_category_.yml
new file mode 100644
index 00000000000..868c91d4e7d
--- /dev/null
+++ b/website/docs/components/navigation/tabs/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_tabs_overview
diff --git a/website/docs/components/navigation/tabs/overview.mdx b/website/docs/components/navigation/tabs/overview.mdx
new file mode 100644
index 00000000000..26a0248649b
--- /dev/null
+++ b/website/docs/components/navigation/tabs/overview.mdx
@@ -0,0 +1,39 @@
+---
+id: component_tabs_overview
+title: Tabs
+slug: /components/tabs
+export_name: EuiTabs
+---
+
+Use tabs to organize **in-page** navigation, segmenting mutually-exclusive content under a single
+organizational principle. For more guideline usage see
+[NNG's article "Tabs, Used Right"](https://www.nngroup.com/articles/tabs-used-right/).
+
+**EuiTabs** is a wrapping component that requires **EuiTab** components as direct children.
+You control the displayed contents and current state through props on EuiTab like `isSelected` and `onClick`.
+
+Use the `prepend` and `append` tab props to add content before and after the tab label respectively.
+
+## Tab sizes
+
+**EuiTabs** allow a `size` prop. In general you should always use the default (medium) size. The small size is best
+for when placing inside popovers or other small containers. Reserve using the large size for when using as primary
+page navigation, like inside of [**EuiPageHeader**](#/layout/page-header).
+
+You can also use the `expand` prop to evenly stretch each tab horizontally.
+
+## Bottom border
+
+The `bottomBorder` helps to separate the tab group from the content below and is on by default.
+However, some components like [flyouts](#/layout/flyout) already provide borders which can act as the divider.
+In this case you can turn the border off with `bottomBorder={false}`.
+
+## Tabbed content
+
+**EuiTabbedContent** makes it easier to associate tabs with content based on the selected tab.
+Use the `initialSelectedTab` prop to specify which tab to initially select.
+
+## Controlled tabbed content
+
+You can also use the `selectedTab` and `onTabClick` props to take complete control over tab selection.
+This can be useful if you want to change tabs based on user interaction with another part of the UI.
diff --git a/website/docs/components/navigation/tree_view/_category_.yml b/website/docs/components/navigation/tree_view/_category_.yml
new file mode 100644
index 00000000000..3e52477dc22
--- /dev/null
+++ b/website/docs/components/navigation/tree_view/_category_.yml
@@ -0,0 +1,3 @@
+link:
+  type: doc
+  id: component_tree_view_overview
diff --git a/website/docs/components/navigation/tree_view/overview.mdx b/website/docs/components/navigation/tree_view/overview.mdx
new file mode 100644
index 00000000000..92167dacf6b
--- /dev/null
+++ b/website/docs/components/navigation/tree_view/overview.mdx
@@ -0,0 +1,38 @@
+---
+id: component_tree_view_overview
+title: Tree view
+slug: /components/tree-view
+export_name: EuiTreeView
+---
+
+**EuiTreeView** allows you to render recursive objects, such as a file directory. It is not meant to be used
+as primary navigation, for that we recommend using [**EuiSideNav**](#/navigation/side-nav).
+
+**EuiTreeView** does not accept `children` directly but requires an array of `EuiTreeViewNode`s through
+its `items` prop.
+
+Each node requires a `label` and a unique `id`. The `icon` prop accepts any [icon or token](#/display/icons).
+You can also specify a different icon for the open state with the `iconWhenExpanded` prop.
+Use the nodes' `children` prop to nest more nodes.
+
+:::warning
+
+For accessibility, it is required to provide a descriptive `aria-label` for each tree view.
+This component also builds in keyboard navigation allowing users to traverse the tree using the arrow keys,
+spacebar, and return.
+
+:::
+
+## Optional styling
+
+**EuiTreeView** supports a compressed mode with the `display="compressed"` setting. When using the compressed version
+it's highly recommended to use the small size of **EuiIcon** and the extra small size of **EuiToken**.
+This will help prevent awkard alignment issues when used alongside the `showExpansionArrows` prop.
+
+The `showExpansionArrows` prop provides an additional visual indicator. Ideal for when a tree's items use icons
+that don't immediately let a user know that there are nested nodes that may not be visible.
+
+In some cases, you may want to automatically expand all the items with children. In those instances,
+you can use the `expandByDefault` prop, as seen in the example below.
+
+Lastly, each node can also accept a custom `className` should you need to style them individually.

From 385df97aa05d69cad107d7f0c797de5eabc8e76b Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Fri, 15 Dec 2023 00:26:21 +0100
Subject: [PATCH 4/7] feat(website): update default sidebar name

---
 website/docusaurus.config.ts |  2 +-
 website/sidebars.ts          | 16 +---------------
 2 files changed, 2 insertions(+), 16 deletions(-)

diff --git a/website/docusaurus.config.ts b/website/docusaurus.config.ts
index 8cfeed82f83..b263f81017a 100644
--- a/website/docusaurus.config.ts
+++ b/website/docusaurus.config.ts
@@ -58,7 +58,7 @@ const config: Config = {
       items: [
         {
           type: 'docSidebar',
-          sidebarId: 'tutorialSidebar',
+          sidebarId: 'rootSidebar',
           position: 'left',
           label: 'Documentation',
         },
diff --git a/website/sidebars.ts b/website/sidebars.ts
index acc7685acd5..19d49664297 100644
--- a/website/sidebars.ts
+++ b/website/sidebars.ts
@@ -11,21 +11,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
  Create as many sidebars as you want.
  */
 const sidebars: SidebarsConfig = {
-  // By default, Docusaurus generates a sidebar from the docs folder structure
-  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
-
-  // But you can create a sidebar manually
-  /*
-  tutorialSidebar: [
-    'intro',
-    'hello',
-    {
-      type: 'category',
-      label: 'Tutorial',
-      items: ['tutorial-basics/create-a-document'],
-    },
-  ],
-   */
+  rootSidebar: [{type: 'autogenerated', dirName: '.'}],
 };
 
 export default sidebars;

From 99795be9f844f36d97a3a202226b8ad2c6cf7624 Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Fri, 15 Dec 2023 00:27:28 +0100
Subject: [PATCH 5/7] feat(website): add root docs page and update homepage
 link to point to it

---
 website/docs/introduction.mdx | 5 +++++
 website/src/pages/index.tsx   | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 website/docs/introduction.mdx

diff --git a/website/docs/introduction.mdx b/website/docs/introduction.mdx
new file mode 100644
index 00000000000..52190f152d1
--- /dev/null
+++ b/website/docs/introduction.mdx
@@ -0,0 +1,5 @@
+---
+title: Introduction
+slug: /
+sidebar_position: 0
+---
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index 29dea5fbdd1..2f96631e486 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -18,7 +18,7 @@ function HomepageHeader() {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/intro">
+            to="/docs">
             EUI Documentation
           </Link>
         </div>

From c202ba7667300d5d62e887dc40dec31580e323ba Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Fri, 15 Dec 2023 00:28:02 +0100
Subject: [PATCH 6/7] docs: reorder components and guidelines docs

---
 website/docs/{guidelines => 01_guidelines}/getting_started.mdx    | 0
 website/docs/{components => 02_components}/layout/_category_.yml  | 0
 .../{components => 02_components}/layout/accordion/_category_.yml | 0
 .../{components => 02_components}/layout/accordion/overview.mdx   | 0
 .../layout/bottom_bar/_category_.yml                              | 0
 .../{components => 02_components}/layout/bottom_bar/overview.mdx  | 0
 .../docs/{components => 02_components}/layout/flex/_category_.yml | 0
 .../docs/{components => 02_components}/layout/flex/overview.mdx   | 0
 .../{components => 02_components}/layout/flyout/_category_.yml    | 0
 .../docs/{components => 02_components}/layout/flyout/overview.mdx | 0
 .../{components => 02_components}/layout/header/_category_.yml    | 0
 .../docs/{components => 02_components}/layout/header/overview.mdx | 0
 .../layout/horizontal_rule/_category_.yml                         | 0
 .../layout/horizontal_rule/overview.mdx                           | 0
 .../{components => 02_components}/layout/modal/_category_.yml     | 0
 .../docs/{components => 02_components}/layout/modal/overview.mdx  | 0
 .../layout/page_header/_category_.yml                             | 0
 .../{components => 02_components}/layout/page_header/overview.mdx | 0
 .../{components => 02_components}/layout/panel/_category_.yml     | 0
 .../docs/{components => 02_components}/layout/panel/overview.mdx  | 0
 .../{components => 02_components}/layout/popover/_category_.yml   | 0
 .../{components => 02_components}/layout/popover/overview.mdx     | 0
 .../layout/resizable_container/_category_.yml                     | 0
 .../layout/resizable_container/overview.mdx                       | 0
 .../{components => 02_components}/layout/spacer/_category_.yml    | 0
 .../docs/{components => 02_components}/layout/spacer/overview.mdx | 0
 .../docs/{components => 02_components}/navigation/_category_.yml  | 0
 .../navigation/breadcrumbs/_category_.yml                         | 0
 .../navigation/breadcrumbs/overview.mdx                           | 0
 .../navigation/button/_category_.yml                              | 0
 .../{components => 02_components}/navigation/button/overview.mdx  | 0
 .../navigation/collapsible_nav/_category_.yml                     | 0
 .../navigation/collapsible_nav/overview.mdx                       | 0
 .../navigation/combo_box/_category_.yml                           | 0
 .../navigation/combo_box/overview.mdx                             | 0
 .../navigation/context_menu/_category_.yml                        | 0
 .../navigation/context_menu/overview.mdx                          | 0
 .../{components => 02_components}/navigation/facet/_category_.yml | 0
 .../{components => 02_components}/navigation/facet/overview.mdx   | 0
 .../navigation/key_pad_menu/_category_.yml                        | 0
 .../navigation/key_pad_menu/overview.mdx                          | 0
 .../{components => 02_components}/navigation/link/_category_.yml  | 0
 .../{components => 02_components}/navigation/link/overview.mdx    | 0
 .../navigation/pagination/_category_.yml                          | 0
 .../navigation/pagination/overview.mdx                            | 0
 .../navigation/side_nav/_category_.yml                            | 0
 .../navigation/side_nav/overview.mdx                              | 0
 .../{components => 02_components}/navigation/steps/_category_.yml | 0
 .../{components => 02_components}/navigation/steps/overview.mdx   | 0
 .../{components => 02_components}/navigation/tabs/_category_.yml  | 0
 .../{components => 02_components}/navigation/tabs/overview.mdx    | 0
 .../navigation/tree_view/_category_.yml                           | 0
 .../navigation/tree_view/overview.mdx                             | 0
 53 files changed, 0 insertions(+), 0 deletions(-)
 rename website/docs/{guidelines => 01_guidelines}/getting_started.mdx (100%)
 rename website/docs/{components => 02_components}/layout/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/accordion/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/accordion/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/bottom_bar/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/bottom_bar/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/flex/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/flex/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/flyout/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/flyout/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/header/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/header/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/horizontal_rule/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/horizontal_rule/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/modal/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/modal/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/page_header/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/page_header/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/panel/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/panel/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/popover/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/popover/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/resizable_container/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/resizable_container/overview.mdx (100%)
 rename website/docs/{components => 02_components}/layout/spacer/_category_.yml (100%)
 rename website/docs/{components => 02_components}/layout/spacer/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/breadcrumbs/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/breadcrumbs/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/button/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/button/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/collapsible_nav/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/collapsible_nav/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/combo_box/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/combo_box/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/context_menu/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/context_menu/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/facet/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/facet/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/key_pad_menu/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/key_pad_menu/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/link/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/link/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/pagination/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/pagination/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/side_nav/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/side_nav/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/steps/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/steps/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/tabs/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/tabs/overview.mdx (100%)
 rename website/docs/{components => 02_components}/navigation/tree_view/_category_.yml (100%)
 rename website/docs/{components => 02_components}/navigation/tree_view/overview.mdx (100%)

diff --git a/website/docs/guidelines/getting_started.mdx b/website/docs/01_guidelines/getting_started.mdx
similarity index 100%
rename from website/docs/guidelines/getting_started.mdx
rename to website/docs/01_guidelines/getting_started.mdx
diff --git a/website/docs/components/layout/_category_.yml b/website/docs/02_components/layout/_category_.yml
similarity index 100%
rename from website/docs/components/layout/_category_.yml
rename to website/docs/02_components/layout/_category_.yml
diff --git a/website/docs/components/layout/accordion/_category_.yml b/website/docs/02_components/layout/accordion/_category_.yml
similarity index 100%
rename from website/docs/components/layout/accordion/_category_.yml
rename to website/docs/02_components/layout/accordion/_category_.yml
diff --git a/website/docs/components/layout/accordion/overview.mdx b/website/docs/02_components/layout/accordion/overview.mdx
similarity index 100%
rename from website/docs/components/layout/accordion/overview.mdx
rename to website/docs/02_components/layout/accordion/overview.mdx
diff --git a/website/docs/components/layout/bottom_bar/_category_.yml b/website/docs/02_components/layout/bottom_bar/_category_.yml
similarity index 100%
rename from website/docs/components/layout/bottom_bar/_category_.yml
rename to website/docs/02_components/layout/bottom_bar/_category_.yml
diff --git a/website/docs/components/layout/bottom_bar/overview.mdx b/website/docs/02_components/layout/bottom_bar/overview.mdx
similarity index 100%
rename from website/docs/components/layout/bottom_bar/overview.mdx
rename to website/docs/02_components/layout/bottom_bar/overview.mdx
diff --git a/website/docs/components/layout/flex/_category_.yml b/website/docs/02_components/layout/flex/_category_.yml
similarity index 100%
rename from website/docs/components/layout/flex/_category_.yml
rename to website/docs/02_components/layout/flex/_category_.yml
diff --git a/website/docs/components/layout/flex/overview.mdx b/website/docs/02_components/layout/flex/overview.mdx
similarity index 100%
rename from website/docs/components/layout/flex/overview.mdx
rename to website/docs/02_components/layout/flex/overview.mdx
diff --git a/website/docs/components/layout/flyout/_category_.yml b/website/docs/02_components/layout/flyout/_category_.yml
similarity index 100%
rename from website/docs/components/layout/flyout/_category_.yml
rename to website/docs/02_components/layout/flyout/_category_.yml
diff --git a/website/docs/components/layout/flyout/overview.mdx b/website/docs/02_components/layout/flyout/overview.mdx
similarity index 100%
rename from website/docs/components/layout/flyout/overview.mdx
rename to website/docs/02_components/layout/flyout/overview.mdx
diff --git a/website/docs/components/layout/header/_category_.yml b/website/docs/02_components/layout/header/_category_.yml
similarity index 100%
rename from website/docs/components/layout/header/_category_.yml
rename to website/docs/02_components/layout/header/_category_.yml
diff --git a/website/docs/components/layout/header/overview.mdx b/website/docs/02_components/layout/header/overview.mdx
similarity index 100%
rename from website/docs/components/layout/header/overview.mdx
rename to website/docs/02_components/layout/header/overview.mdx
diff --git a/website/docs/components/layout/horizontal_rule/_category_.yml b/website/docs/02_components/layout/horizontal_rule/_category_.yml
similarity index 100%
rename from website/docs/components/layout/horizontal_rule/_category_.yml
rename to website/docs/02_components/layout/horizontal_rule/_category_.yml
diff --git a/website/docs/components/layout/horizontal_rule/overview.mdx b/website/docs/02_components/layout/horizontal_rule/overview.mdx
similarity index 100%
rename from website/docs/components/layout/horizontal_rule/overview.mdx
rename to website/docs/02_components/layout/horizontal_rule/overview.mdx
diff --git a/website/docs/components/layout/modal/_category_.yml b/website/docs/02_components/layout/modal/_category_.yml
similarity index 100%
rename from website/docs/components/layout/modal/_category_.yml
rename to website/docs/02_components/layout/modal/_category_.yml
diff --git a/website/docs/components/layout/modal/overview.mdx b/website/docs/02_components/layout/modal/overview.mdx
similarity index 100%
rename from website/docs/components/layout/modal/overview.mdx
rename to website/docs/02_components/layout/modal/overview.mdx
diff --git a/website/docs/components/layout/page_header/_category_.yml b/website/docs/02_components/layout/page_header/_category_.yml
similarity index 100%
rename from website/docs/components/layout/page_header/_category_.yml
rename to website/docs/02_components/layout/page_header/_category_.yml
diff --git a/website/docs/components/layout/page_header/overview.mdx b/website/docs/02_components/layout/page_header/overview.mdx
similarity index 100%
rename from website/docs/components/layout/page_header/overview.mdx
rename to website/docs/02_components/layout/page_header/overview.mdx
diff --git a/website/docs/components/layout/panel/_category_.yml b/website/docs/02_components/layout/panel/_category_.yml
similarity index 100%
rename from website/docs/components/layout/panel/_category_.yml
rename to website/docs/02_components/layout/panel/_category_.yml
diff --git a/website/docs/components/layout/panel/overview.mdx b/website/docs/02_components/layout/panel/overview.mdx
similarity index 100%
rename from website/docs/components/layout/panel/overview.mdx
rename to website/docs/02_components/layout/panel/overview.mdx
diff --git a/website/docs/components/layout/popover/_category_.yml b/website/docs/02_components/layout/popover/_category_.yml
similarity index 100%
rename from website/docs/components/layout/popover/_category_.yml
rename to website/docs/02_components/layout/popover/_category_.yml
diff --git a/website/docs/components/layout/popover/overview.mdx b/website/docs/02_components/layout/popover/overview.mdx
similarity index 100%
rename from website/docs/components/layout/popover/overview.mdx
rename to website/docs/02_components/layout/popover/overview.mdx
diff --git a/website/docs/components/layout/resizable_container/_category_.yml b/website/docs/02_components/layout/resizable_container/_category_.yml
similarity index 100%
rename from website/docs/components/layout/resizable_container/_category_.yml
rename to website/docs/02_components/layout/resizable_container/_category_.yml
diff --git a/website/docs/components/layout/resizable_container/overview.mdx b/website/docs/02_components/layout/resizable_container/overview.mdx
similarity index 100%
rename from website/docs/components/layout/resizable_container/overview.mdx
rename to website/docs/02_components/layout/resizable_container/overview.mdx
diff --git a/website/docs/components/layout/spacer/_category_.yml b/website/docs/02_components/layout/spacer/_category_.yml
similarity index 100%
rename from website/docs/components/layout/spacer/_category_.yml
rename to website/docs/02_components/layout/spacer/_category_.yml
diff --git a/website/docs/components/layout/spacer/overview.mdx b/website/docs/02_components/layout/spacer/overview.mdx
similarity index 100%
rename from website/docs/components/layout/spacer/overview.mdx
rename to website/docs/02_components/layout/spacer/overview.mdx
diff --git a/website/docs/components/navigation/_category_.yml b/website/docs/02_components/navigation/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/_category_.yml
rename to website/docs/02_components/navigation/_category_.yml
diff --git a/website/docs/components/navigation/breadcrumbs/_category_.yml b/website/docs/02_components/navigation/breadcrumbs/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/breadcrumbs/_category_.yml
rename to website/docs/02_components/navigation/breadcrumbs/_category_.yml
diff --git a/website/docs/components/navigation/breadcrumbs/overview.mdx b/website/docs/02_components/navigation/breadcrumbs/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/breadcrumbs/overview.mdx
rename to website/docs/02_components/navigation/breadcrumbs/overview.mdx
diff --git a/website/docs/components/navigation/button/_category_.yml b/website/docs/02_components/navigation/button/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/button/_category_.yml
rename to website/docs/02_components/navigation/button/_category_.yml
diff --git a/website/docs/components/navigation/button/overview.mdx b/website/docs/02_components/navigation/button/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/button/overview.mdx
rename to website/docs/02_components/navigation/button/overview.mdx
diff --git a/website/docs/components/navigation/collapsible_nav/_category_.yml b/website/docs/02_components/navigation/collapsible_nav/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/collapsible_nav/_category_.yml
rename to website/docs/02_components/navigation/collapsible_nav/_category_.yml
diff --git a/website/docs/components/navigation/collapsible_nav/overview.mdx b/website/docs/02_components/navigation/collapsible_nav/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/collapsible_nav/overview.mdx
rename to website/docs/02_components/navigation/collapsible_nav/overview.mdx
diff --git a/website/docs/components/navigation/combo_box/_category_.yml b/website/docs/02_components/navigation/combo_box/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/combo_box/_category_.yml
rename to website/docs/02_components/navigation/combo_box/_category_.yml
diff --git a/website/docs/components/navigation/combo_box/overview.mdx b/website/docs/02_components/navigation/combo_box/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/combo_box/overview.mdx
rename to website/docs/02_components/navigation/combo_box/overview.mdx
diff --git a/website/docs/components/navigation/context_menu/_category_.yml b/website/docs/02_components/navigation/context_menu/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/context_menu/_category_.yml
rename to website/docs/02_components/navigation/context_menu/_category_.yml
diff --git a/website/docs/components/navigation/context_menu/overview.mdx b/website/docs/02_components/navigation/context_menu/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/context_menu/overview.mdx
rename to website/docs/02_components/navigation/context_menu/overview.mdx
diff --git a/website/docs/components/navigation/facet/_category_.yml b/website/docs/02_components/navigation/facet/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/facet/_category_.yml
rename to website/docs/02_components/navigation/facet/_category_.yml
diff --git a/website/docs/components/navigation/facet/overview.mdx b/website/docs/02_components/navigation/facet/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/facet/overview.mdx
rename to website/docs/02_components/navigation/facet/overview.mdx
diff --git a/website/docs/components/navigation/key_pad_menu/_category_.yml b/website/docs/02_components/navigation/key_pad_menu/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/key_pad_menu/_category_.yml
rename to website/docs/02_components/navigation/key_pad_menu/_category_.yml
diff --git a/website/docs/components/navigation/key_pad_menu/overview.mdx b/website/docs/02_components/navigation/key_pad_menu/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/key_pad_menu/overview.mdx
rename to website/docs/02_components/navigation/key_pad_menu/overview.mdx
diff --git a/website/docs/components/navigation/link/_category_.yml b/website/docs/02_components/navigation/link/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/link/_category_.yml
rename to website/docs/02_components/navigation/link/_category_.yml
diff --git a/website/docs/components/navigation/link/overview.mdx b/website/docs/02_components/navigation/link/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/link/overview.mdx
rename to website/docs/02_components/navigation/link/overview.mdx
diff --git a/website/docs/components/navigation/pagination/_category_.yml b/website/docs/02_components/navigation/pagination/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/pagination/_category_.yml
rename to website/docs/02_components/navigation/pagination/_category_.yml
diff --git a/website/docs/components/navigation/pagination/overview.mdx b/website/docs/02_components/navigation/pagination/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/pagination/overview.mdx
rename to website/docs/02_components/navigation/pagination/overview.mdx
diff --git a/website/docs/components/navigation/side_nav/_category_.yml b/website/docs/02_components/navigation/side_nav/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/side_nav/_category_.yml
rename to website/docs/02_components/navigation/side_nav/_category_.yml
diff --git a/website/docs/components/navigation/side_nav/overview.mdx b/website/docs/02_components/navigation/side_nav/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/side_nav/overview.mdx
rename to website/docs/02_components/navigation/side_nav/overview.mdx
diff --git a/website/docs/components/navigation/steps/_category_.yml b/website/docs/02_components/navigation/steps/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/steps/_category_.yml
rename to website/docs/02_components/navigation/steps/_category_.yml
diff --git a/website/docs/components/navigation/steps/overview.mdx b/website/docs/02_components/navigation/steps/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/steps/overview.mdx
rename to website/docs/02_components/navigation/steps/overview.mdx
diff --git a/website/docs/components/navigation/tabs/_category_.yml b/website/docs/02_components/navigation/tabs/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/tabs/_category_.yml
rename to website/docs/02_components/navigation/tabs/_category_.yml
diff --git a/website/docs/components/navigation/tabs/overview.mdx b/website/docs/02_components/navigation/tabs/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/tabs/overview.mdx
rename to website/docs/02_components/navigation/tabs/overview.mdx
diff --git a/website/docs/components/navigation/tree_view/_category_.yml b/website/docs/02_components/navigation/tree_view/_category_.yml
similarity index 100%
rename from website/docs/components/navigation/tree_view/_category_.yml
rename to website/docs/02_components/navigation/tree_view/_category_.yml
diff --git a/website/docs/components/navigation/tree_view/overview.mdx b/website/docs/02_components/navigation/tree_view/overview.mdx
similarity index 100%
rename from website/docs/components/navigation/tree_view/overview.mdx
rename to website/docs/02_components/navigation/tree_view/overview.mdx

From 5ba64afa2b14005f91acaadee04f29d6009f2f5b Mon Sep 17 00:00:00 2001
From: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Date: Fri, 15 Dec 2023 00:28:34 +0100
Subject: [PATCH 7/7] docs: make guidelines and components sections expanded by
 default

---
 website/docs/{guidelines => 01_guidelines}/_category_.yml | 1 +
 website/docs/{components => 02_components}/_category_.yml | 1 +
 2 files changed, 2 insertions(+)
 rename website/docs/{guidelines => 01_guidelines}/_category_.yml (51%)
 rename website/docs/{components => 02_components}/_category_.yml (51%)

diff --git a/website/docs/guidelines/_category_.yml b/website/docs/01_guidelines/_category_.yml
similarity index 51%
rename from website/docs/guidelines/_category_.yml
rename to website/docs/01_guidelines/_category_.yml
index 2b0848e7169..95f5157d93f 100644
--- a/website/docs/guidelines/_category_.yml
+++ b/website/docs/01_guidelines/_category_.yml
@@ -1 +1,2 @@
 label: Guidelines
+collapsed: false
diff --git a/website/docs/components/_category_.yml b/website/docs/02_components/_category_.yml
similarity index 51%
rename from website/docs/components/_category_.yml
rename to website/docs/02_components/_category_.yml
index 93fd4ef916f..300fcc08f3a 100644
--- a/website/docs/components/_category_.yml
+++ b/website/docs/02_components/_category_.yml
@@ -1 +1,2 @@
 label: Components
+collapsed: false