Skip to main content

mokudocs

About

mokudocs

About

Design Systems

BOOKMARK
Save on this device

Navigation (Side Nav + Current State)

The side navigation is one of the most important parts of the MokuDocs experience. It gives readers orientation, shows where they are, and helps them move through the content with confidence.

What the navigation should do well

  • group pages clearly by category

  • make the current page obvious

  • preserve context while browsing

  • scale without becoming visually noisy

Good navigation behaviour

A reader should be able to answer these questions at a glance:

  • What section am I in?

  • What other pages live here?

  • What should I read next?

  • How do I get back to broader topics?

Design principle

Navigation should support reading, not compete with it. The content area should remain the focus, while the side nav provides stable context and wayfinding.

Common mistakes

  • too many categories

  • inconsistent page naming

  • weak active states

  • navigation labels that make sense only to the author

The best docs navigation feels almost invisible because it makes the structure obvious.

Helpful resources

Navigation patterns in Mokudocs work best when you understand Framer's project structure and layout behavior.

The anatomy of a Framer project

Framer Fundamentals

AreaExpected BehaviourWhy It Matters
Category GroupingPages are grouped under clear top-level sectionsHelps readers predict where content lives
Current Page StateActive page is visually obviousMaintains orientation
Next / Previous LinksRelated pages can be read in sequenceSupports guided reading
Docs Hub AccessReaders can return to the main hub easilyPrevents dead-end navigation
TOC SupportLong pages expose internal headingsImproves scanning
AreaExpected BehaviourWhy It Matters
Category GroupingPages are grouped under clear top-level sectionsHelps readers predict where content lives
Current Page StateActive page is visually obviousMaintains orientation
Next / Previous LinksRelated pages can be read in sequenceSupports guided reading
Docs Hub AccessReaders can return to the main hub easilyPrevents dead-end navigation
TOC SupportLong pages expose internal headingsImproves scanning
AreaExpected BehaviourWhy It Matters
Category GroupingPages are grouped under clear top-level sectionsHelps readers predict where content lives
Current Page StateActive page is visually obviousMaintains orientation
Next / Previous LinksRelated pages can be read in sequenceSupports guided reading
Docs Hub AccessReaders can return to the main hub easilyPrevents dead-end navigation
TOC SupportLong pages expose internal headingsImproves scanning

Active state logic example

ts
export function isActiveDoc(currentSlug: string, itemSlug: string) {
  return currentSlug === itemSlug
}

export function isActiveCategory(currentCategory: string, itemCategory: string) {
  return currentCategory === itemCategory
}

Active state logic example

ts
export function isActiveDoc(currentSlug: string, itemSlug: string) {
  return currentSlug === itemSlug
}

export function isActiveCategory(currentCategory: string, itemCategory: string) {
  return currentCategory === itemCategory
}

Active state logic example

ts
export function isActiveDoc(currentSlug: string, itemSlug: string) {
  return currentSlug === itemSlug
}

export function isActiveCategory(currentCategory: string, itemCategory: string) {
  return currentCategory === itemCategory
}
Annotated sidebar navigation diagram with labeled components

Good docs navigation should answer four questions quickly: where am I, what else is here, what comes next, and how do I get back.

Annotated sidebar navigation diagram with labeled components

Good docs navigation should answer four questions quickly: where am I, what else is here, what comes next, and how do I get back.

Annotated sidebar navigation diagram with labeled components

Good docs navigation should answer four questions quickly: where am I, what else is here, what comes next, and how do I get back.

‹ Adding Images, Diagrams, and Screen Recordings

Table of Contents (TOC) Pattern ›

Table of Contents (TOC) Pattern ›

© 2026 MokuDocs. Powered by Mokujiro Studio.

© 2026 MokuDocs. Powered by Mokujiro Studio.

© 2026 MokuDocs. Powered by Mokujiro Studio.

Create a free website with Framer, the website builder loved by startups, designers and agencies.