Navigation Pattern Encyclopedia

Community

phazurlabs

navigation-pattern-encyclopedia

Every navigation pattern with specs, trade-offs, and production code: top bars, sidebars, bottom tabs, mega menus, breadcrumbs, command palettes, and contextual and mobile navigation. Use when choosing a nav model, fixing discoverability, or structuring information architecture.

Overview

Publisher	phazurlabs
Repository	`sumi`
Skill name	`navigation-pattern-encyclopedia`
Stars	58
Forks	11
Bundled files	6
License	Apache-2.0
Links	Skill source Repository

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
6 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by phazurlabs on GitHub. Read the source before you install it.

Installation

Install the Navigation Pattern Encyclopedia AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
https://github.com/phazurlabs/sumi/tree/main/skills/navigation-pattern-encyclopedia
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/phazurlabs/sumi.git /tmp/sumi
mkdir -p .claude/skills
cp -r /tmp/sumi/skills/navigation-pattern-encyclopedia .claude/skills/navigation-pattern-encyclopedia

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Navigation Pattern Encyclopedia in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Navigation Pattern Encyclopedia on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Navigation Pattern Encyclopedia is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Navigation Pattern Encyclopedia — Every Nav Pattern

Mental model

Navigation answers three questions, in this order: where am I, where can I go, and how do I get back. A pattern that answers only the second is a menu, not a navigation system.

Visible beats hidden. Nielsen Norman's study (179 participants, six sites) found hidden navigation cuts content discoverability by nearly half and raises both time on task and perceived difficulty. Hide navigation only when the screen genuinely cannot hold it.
Information scent is the whole game. A label must let someone predict what is behind it. "Solutions" has no scent; "Pricing" has perfect scent.
Depth costs more than breadth. Two levels of fifteen items beat four levels of four. Every extra level is a place to get lost.
The pattern follows the destination count. Three to five destinations means bottom tabs or a top bar. Twenty-plus means a mega menu or search-first. Fifty means a command palette, because no menu structure survives that.

Index

If	Pattern	Reference
5-7 destinations, marketing or app shell	Top horizontal bar	`primary-navigation-patterns.md`
20+ destinations, e-commerce or enterprise	Mega menu	`primary-navigation-patterns.md`
Brand-led marketing site	Centered logo nav	`primary-navigation-patterns.md`
Search is the primary action	Nav with integrated search	`primary-navigation-patterns.md`
Deep app, many sections	Sidebar	`primary-navigation-patterns.md`
Power users, 50+ destinations	Command palette	`primary-navigation-patterns.md`
Mobile, 3-5 destinations	Bottom tab bar	`mobile-navigation-patterns.md`
Mobile, more than 5	Drawer or hamburger	`mobile-navigation-patterns.md`
Showing position in a hierarchy	Breadcrumbs	`secondary-navigation-patterns.md`
Switching views of one object	Tabs, segmented control	`secondary-navigation-patterns.md`
Long result sets	Pagination	`secondary-navigation-patterns.md`
Linear multi-step process	Stepper	`secondary-navigation-patterns.md`
Any of the above, made accessible	—	`navigation-accessibility.md`
Deciding the structure underneath	—	`information-architecture.md`

Reference architecture

File	Covers	Lines
`references/primary-navigation-patterns.md`	27 primary patterns with TSX	1822
`references/secondary-navigation-patterns.md`	22 secondary patterns	1339
`references/mobile-navigation-patterns.md`	mobile-specific patterns	1146
`references/navigation-accessibility.md`	ARIA, keyboard, focus	1046
`references/information-architecture.md`	IA methods, taxonomy, URLs	861

What every reference file contains

Anatomy — the structural parts and what each is called
When to use it, and the condition that rules it out
Complete React/TSX plus CSS, runnable, no placeholders
The responsive transformation at each breakpoint
ARIA roles, keyboard map, and focus order
Anti-patterns specific to that pattern

Routing

For primary navigation — 27 patterns with specs and TSX, including top bar, mega menu, centered logo, integrated search, sidebar and command palette: read references/primary-navigation-patterns.md.

For secondary navigation — breadcrumbs (simple, dropdown, truncated), tabs, segmented controls, pagination and steppers: read references/secondary-navigation-patterns.md.

For mobile — bottom tab bar (iOS), bottom navigation (Material 3), hamburger and drawer variants, and the gesture patterns around them: read references/mobile-navigation-patterns.md.

For making it accessible — ARIA landmarks, skip navigation, current-page indication, expanded/collapsed state, and focus management: read references/navigation-accessibility.md.

For structuring the content underneath — IA research methods, IA structures, labeling and taxonomy, sitemap design and URL structure: read references/information-architecture.md.

For odds and ends — the patterns that had no home in the files above when this skill was converted to a router: read references/navigation-supplementary.md.

Cross-References

mobile-ux-design — iOS and Android navigation deep dives
desktop-app-design — Desktop navigation conventions
layout-block-intelligence — Header/nav block patterns and layout integration
accessibility-inclusive-design — Full WCAG navigation requirements
screen-flow-patterns — User flow patterns that connect to navigation
component-patterns-code — Production code for nav components
interaction-motion-design — Navigation transition animations
responsive-block-patterns — Responsive transformation specs

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

Frequently asked questions

What does the Navigation Pattern Encyclopedia AI skill do?

Why use Navigation Pattern Encyclopedia on TypingMind?

Because you install it once and use it with any model. Navigation Pattern Encyclopedia is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Navigation Pattern Encyclopedia in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/phazurlabs/sumi/tree/main/skills/navigation-pattern-encyclopedia. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Navigation Pattern Encyclopedia?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Navigation Pattern Encyclopedia?

As many as you like. As long as a model supports skills, you can use Navigation Pattern Encyclopedia with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Navigation Pattern Encyclopedia AI skill free?

Yes. It is published on GitHub by phazurlabs under the Apache-2.0 license. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Api Design

affaan-m

CommunityPopular

Patrones de diseño REST API incluyendo nomenclatura de recursos, códigos de estado, paginación, filtrado, respuestas de error, versionado y rate limiting para APIs de producción.

Accessibility

WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム（iOS/Android）のアクセシビリティトレイトを生成するために使用します。

Archify

Validated interactive HTML diagrams, upstream-maintained.

Auteur

Design and build cinematic, award-level web pages.

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Navigation Pattern Encyclopedia — Every Nav Pattern

Mental model

Index

Reference architecture

What every reference file contains

Routing

Cross-References

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now