--- title: "Side navigation UI: anatomy, variants and examples | Kombai" description: "Side navigation is a vertical panel of links along the edge of an app that moves people between its sections." canonical_url: https://kombai.com/glossary/side-navigation/ author: "The Kombai Team" --- # Side navigation Side navigation is a vertical panel of links along the edge of an app that moves people between its sections. - Also called: sidebar, side nav - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/side-navigation/), [30 mobile designs](https://kombai.com/gallery/mobile/side-navigation/) - [Weftra Console](https://kombai.com/gallery/inspirations/side-navigation-web-4/) (Web) - [Quillmoor](https://kombai.com/gallery/inspirations/side-navigation-ios-28/) (Mobile) - [Alderfell](https://kombai.com/gallery/inspirations/side-navigation-web-12/) (Web) ## What is a side navigation? Side navigation is a column of links down one edge of an app, usually the left. It lists every main section at once, keeps the current one highlighted and stays in place while the content beside it changes. On phones the same links move into a drawer that slides in over the screen. - Items pair an icon with a short label, grouped under section names. - It can collapse to a narrow rail of icons to give the content more room. ## When to use side navigation - **Many sections.** Apps with more destinations than fit across a top bar. - **Long working sessions.** Tools people stay in all day and switch sections in often, like a CRM. - **Grouped destinations.** Sections that fall into clear groups, like Build, Data and Settings. ## When not to use one - **A few top sections.** A handful of sections fits in a navbar, or a tab bar on phones. - **Marketing sites.** Visitors scan a page top to bottom. A sidebar takes width from the story. - **Deep hierarchies.** Past two levels, show the deeper items in a list beside the sidebar. ## Anatomy 1. **Header**: Workspace or app name 2. **Item**: Icon and label, one per section 3. **Group label**: Names a set of items 4. **Collapsible group**: Opens nested items 5. **Collapse button**: Shrinks it to a rail 6. **States**: Current, focus, collapsed ## Variants We sorted every side navigation design in the Kombai gallery and found five patterns. ### 1. Grouped under labels The default. Items sorted under small uppercase or muted labels, like Platform, Query and Settings. - [Wrackfen](https://kombai.com/gallery/inspirations/side-navigation-web-41/) (Web) - [Wheylark console](https://kombai.com/gallery/inspirations/side-navigation-web-48/) (Web) - [Weavry](https://kombai.com/gallery/inspirations/side-navigation-web-3/) (Web) ### 2. Nested, collapsible sections Items with a chevron that open to show sub-pages, so a long list folds down to its top level. - [Combwell](https://kombai.com/gallery/inspirations/side-navigation-web-9/) (Web) - [Cairnfell](https://kombai.com/gallery/inspirations/side-navigation-web-2/) (Web) - [Goswick](https://kombai.com/gallery/inspirations/side-navigation-web-46/) (Web) ### 3. Icon rails A narrow column of icons, sometimes with a tiny label under each, that leaves most of the width to the work. - [Vindholm Host](https://kombai.com/gallery/inspirations/side-navigation-web-17/) (Web) - [Pomarie](https://kombai.com/gallery/inspirations/side-navigation-web-5/) (Web) - [Incuna](https://kombai.com/gallery/inspirations/side-navigation-web-8/) (Web) ### 4. Rail with a second panel An icon rail picks the area, and a wider panel beside it lists what is inside, like files, accounts or channels. - [Files](https://kombai.com/gallery/inspirations/side-navigation-web-15/) (Web) - [Slakewold](https://kombai.com/gallery/inspirations/side-navigation-web-43/) (Web) - [Annelith](https://kombai.com/gallery/inspirations/side-navigation-web-49/) (Web) ### 5. Drawers on phones The same list slides in from the left edge over the screen, often with the account or workspace at the top. - [Elmridge](https://kombai.com/gallery/inspirations/side-navigation-ios-10/) (Mobile) - [Emberreel](https://kombai.com/gallery/inspirations/side-navigation-ios-9/) (Mobile) - [Vardo Studio](https://kombai.com/gallery/inspirations/side-navigation-ios-26/) (Mobile) ## Where sidebars show up ### Inboxes and queues Each view or folder carries a count, so people see what is waiting before they open it. - [Pharwick](https://kombai.com/gallery/inspirations/side-navigation-web-33/) (Web) - [Fillistra](https://kombai.com/gallery/inspirations/side-navigation-web-40/) (Web) - [Latchbox](https://kombai.com/gallery/inspirations/side-navigation-ios-17/) (Mobile) ### AI assistants Past conversations listed in the sidebar, usually under a New chat button. - [Search chats](https://kombai.com/gallery/inspirations/side-navigation-web-23/) (Web) - [Palimsa](https://kombai.com/gallery/inspirations/side-navigation-web-22/) (Web) - [Motmot](https://kombai.com/gallery/inspirations/side-navigation-ios-22/) (Mobile) ### Ride app menus Wallet, promo codes and trip history in a drawer, often with the rider's stats at the top. - [Zoisite Mobility](https://kombai.com/gallery/inspirations/side-navigation-ios-1/) (Mobile) - [Ambler](https://kombai.com/gallery/inspirations/side-navigation-ios-7/) (Mobile) - [Pannier](https://kombai.com/gallery/inspirations/side-navigation-ios-21/) (Mobile) ## Side navigation vs similar components | | [Side navigation](https://kombai.com/glossary/side-navigation/) | [Navbar](https://kombai.com/glossary/navbar/) | [Drawer](https://kombai.com/glossary/drawer/) | [Tree](https://kombai.com/glossary/tree/) | |---|---|---|---|---| | Sits | Down one edge, always visible | Across the top of the page | Slides in over the page | Inside a panel or page | | Holds | Many sections, often grouped | A few main links and actions | Links or extra content | A deep hierarchy of items | | Best for | Apps with many sections | Sites with a few sections | Phones and occasional tasks | Files, folders and categories | ## Build notes - Put the links in a