diff --git a/docs/assets/getting-started/sidebar-submenu-example.png b/docs/assets/getting-started/sidebar-submenu-example.png
new file mode 100644
index 0000000000..0b30f0ca6a
Binary files /dev/null and b/docs/assets/getting-started/sidebar-submenu-example.png differ
diff --git a/docs/getting-started/app-custom-theme.md b/docs/getting-started/app-custom-theme.md
index 146f160d71..5ec0d6eeab 100644
--- a/docs/getting-started/app-custom-theme.md
+++ b/docs/getting-started/app-custom-theme.md
@@ -393,6 +393,98 @@ You can add more icons, if the [default icons](https://github.com/backstage/back
Note: If the icon is not available as one of the default icons or one you've added then it will fall back to Material UI's `LanguageIcon`
+## Custom Sidebar
+
+As you've seen there are many ways that you can customize your Backstage app. The following section will show you how you can customize the sidebar.
+
+### Sidebar Sub-menu
+
+For this example we'll show you how you can expand the sidebar with a sub-menu:
+
+1. Open the `Root.tsx` file located in `packages/app/src/components/Root` as this is where the sidebar code lives
+2. Then we want to add the following imports for the icons:
+
+ ```ts
+ import ApiIcon from '@material-ui/icons/Extension';
+ import ComponentIcon from '@material-ui/icons/Memory';
+ import DomainIcon from '@material-ui/icons/Apartment';
+ import ResourceIcon from '@material-ui/icons/Work';
+ import SystemIcon from '@material-ui/icons/Category';
+ import UserIcon from '@material-ui/icons/Person';
+ ```
+
+3. Then update the `@backstage/core-components` import like this:
+
+ ```diff
+ import {
+ Sidebar,
+ sidebarConfig,
+ SidebarDivider,
+ SidebarGroup,
+ SidebarItem,
+ SidebarPage,
+ SidebarScrollWrapper,
+ SidebarSpace,
+ useSidebarOpenState,
+ Link,
+ + GroupIcon,
+ + SidebarSubmenu,
+ + SidebarSubmenuItem,
+ } from '@backstage/core-components';
+ ```
+
+4. Finally replace `` with this:
+
+ ```ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+When you startup your Backstage app and hover over the Home option on the sidebar you'll now see a nice sub-menu appear with links to the various Kinds in your Catalog. It would look like this:
+
+
+
+You can see more ways to use this in the [Storybook Sidebar examples](https://backstage.io/storybook/?path=/story/layout-sidebar--sample-scalable-sidebar)
+
## Custom Homepage
In addition to a custom theme, a custom logo, you can also customize the
diff --git a/packages/app/src/components/Root/Root.tsx b/packages/app/src/components/Root/Root.tsx
index 41e5b15db9..8cec54326a 100644
--- a/packages/app/src/components/Root/Root.tsx
+++ b/packages/app/src/components/Root/Root.tsx
@@ -47,12 +47,21 @@ import {
SidebarSpace,
Link,
useSidebarOpenState,
+ SidebarSubmenu,
+ SidebarSubmenuItem,
} from '@backstage/core-components';
import { MyGroupsSidebarItem } from '@backstage/plugin-org';
import GroupIcon from '@material-ui/icons/People';
import { SearchModal } from '../search/SearchModal';
import Score from '@material-ui/icons/Score';
+import ApiIcon from '@material-ui/icons/Extension';
+import ComponentIcon from '@material-ui/icons/Memory';
+import DomainIcon from '@material-ui/icons/Apartment';
+import ResourceIcon from '@material-ui/icons/Work';
+import SystemIcon from '@material-ui/icons/Category';
+import UserIcon from '@material-ui/icons/Person';
+
const useSidebarLogoStyles = makeStyles({
root: {
width: sidebarConfig.drawerWidthClosed,
@@ -93,7 +102,47 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
}>
{/* Global nav, not org-specific */}
-
+
+
+
+
+
+
+
+
+
+
+
+
+