About this template: Warp Multi-sidebars

Redocly offers almost complete flexibility in information architecture. This website is a demonstration of a common information architecture with a single navbar and multiple sidebars.

The content is meant to be fun and playful, but the information architecture is serious.

Step 1: Sitemap

Map your content out. A sitemap is different from navigation.

I color code the sitemap to organize the content into logical groupings.

To spare space, I only show the handful of pages in each logical grouping.

Step 2: Navigation

Decide how you want to organize your navigation. You can have navbars, sidebars, and footers. Most websites have 1 navbar and 1 footer, but it's not uncommon to have multiple sidebars. In some exceptions for multi-product website, they have multiple navbars.

I decided this site would have 1 navbar, 1 footer, and multiple sidebars. I decided a few pages shouldn't have sidebars such as the home page, the changelog, and the legal pages.

However, I could have easily added a sidebar to any of those pages by adding the file to the appropriate sidebars.yaml file.

A project with multiple sidebars would have multiple sidebars.yaml files (with that exact name but located in different folders). They can be organized into folders as appropriate (you can see how I organized my project).

The source is available on GitHub.

A project with a single sidebar is also available on GitHub at the Warp Single-sidebar template.

├── @theme
│   ├── Templates
│   │   └── StepByStep.tsx
│   ├── components
│   │   └── CardWithCode
│   │       └── CardWithCode.tsx
│   ├── markdoc
│   │   ├── components.tsx
│   │   └── schema.ts
│   └── styles.css
├── about.md
├── apis
│   ├── arazzo.yaml
│   └── index.yaml
├── changelog.md
├── guides
│   ├── advanced-topics
│   │   ├── automated-event-manipulation.md
│   │   ├── case-studies-advanced-manipulation.md
│   │   ├── complex-paradox-resolution.md
│   │   ├── custom-extensions-plugins.md
│   │   ├── high-precision-temporal-anchoring.md
│   │   ├── index.md
│   │   ├── multi-timeline-management.md
│   │   ├── security-in-time-travel.md
│   │   ├── temporal-data-management.md
│   │   ├── temporal-ethics-best-practices.md
│   │   └── temporal-mechanics.md
│   ├── event-manipulation.md
│   ├── index.md
│   ├── quickstart.md
│   ├── sidebars.yaml
│   ├── temporal-anchoring.md
│   └── time-navigation.md
├── images
│   ├── background.svg
│   ├── grid-dark.svg
│   ├── grid.svg
│   ├── logo.svg
│   ├── navigation.png
│   └── sitemap.png
├── index.page.tsx
├── legal
│   ├── responsible-use.md
│   └── terms.md
├── package-lock.json
├── package.json
├── redocly.yaml
├── tools
│   ├── cli.md
│   ├── index.md
│   ├── replay.md
│   ├── sdks.md
│   └── sidebars.yaml
└── tutorials
    ├── index.md
    ├── lost-invention.md
    ├── missing-mathematician.md
    └── sidebars.yaml

Step 3: Home page

The home page is the first page that visitors see. It is the most important page.

While I usually start with a draft, I often complete the home page last.

The home page can have a hero section, a features section, a benefits section, and a call to action.

In addition, the home page can have a navbar, a footer, and a sidebar. However, many times people choose not to have a sidebar on the home page.

I start my home page in Markdown because it's easy to write. Then, I add in the fancier components and design flourishes last.

The same concept applies to any landing page, not just the home page.