Skip to content
hig-components-search logo

Apple HIG: Navigation Components

hig-components-search

Apple HIG guidance for navigation-related components including search fields, page controls, and path controls.

SKILL.md

Full skill instructions

Apple HIG: Navigation Components

Check for .claude/​apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Search: discoverable with instant feedback. Place search fields where users expect them (top of list, toolbar/​navigation bar). Show results as the user types.

  2. Page controls: position in a flat page sequence. For discrete, equally weighted pages (onboarding, photo gallery). Show current page and total count.

  3. Path controls: file hierarchy navigation. macOS path controls display location within a directory structure and allow jumping to any ancestor.

  4. Search scopes narrow large result sets. Provide scope buttons so users can filter without complex queries.

  5. Clear empty states for search. Helpful message suggesting corrections or alternatives, not a blank screen.

  6. Page controls are not for hierarchical navigation. Flat, linear sequences only. Use navigation controllers, tab bars, or sidebars for hierarchy.

  7. Keep path controls concise. Show meaningful segments only. Users can click any segment to navigate directly.

  8. Support keyboard for search. Command-F and system search shortcuts should activate search.

Reference Index

ReferenceTopicKey content
search-fields.mdSearch fieldsScopes, tokens, instant results, placement
page-controls.mdPage controlsDot indicators, flat page sequences
path-controls.mdPath controlsBreadcrumbs, ancestor navigation

Output Format

  1. Component recommendation -- search field, page control, or path control, and why.
  2. Behavior specification -- interaction model (search-as-you-type, swipe for pages, click-to-navigate for paths).
  3. Platform differences across iOS, iPadOS, macOS, visionOS.

Questions to Ask

  1. What type of content is being searched or navigated?
  2. Which platforms?
  3. How large is the dataset?
  4. Is search the primary interaction?

Related Skills

  • hig-components-menus -- Toolbars and menu bars hosting search and navigation controls
  • hig-components-controls -- Text fields, pickers, segmented controls in search interfaces
  • hig-components-dialogs -- Popovers and sheets for expanded search or filtering
  • hig-patterns -- Navigation patterns and information architecture
  • hig-foundations -- Typography and layout for navigation components

Built by Raintree Technology · More developer tools

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

More skills from sickn33

api-security-best-practices logo
sickn33/antigravity-awesome-skills

api-security-best-practices

Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities

47.3K 7.4K
View
nextjs-best-practices logo
sickn33/antigravity-awesome-skills

nextjs-best-practices

Next.js App Router principles. Server Components, data fetching, routing patterns.

47.3K 5.7K
View
nextjs-supabase-auth logo
sickn33/antigravity-awesome-skills

nextjs-supabase-auth

Expert integration of Supabase Auth with Next.js App Router

47.3K 5.2K
View
browser-automation logo
sickn33/antigravity-awesome-skills

browser-automation

Browser automation powers web testing, scraping, and AI agent

47.3K 5.1K
View
prisma-expert logo
sickn33/antigravity-awesome-skills

prisma-expert

prisma expert

47.3K 3.6K
View
playwright-skill logo
sickn33/antigravity-awesome-skills

playwright-skill

playwright skill

47.3K 3.3K
View
game-development logo
sickn33/antigravity-awesome-skills

game-development

Game development orchestrator. Routes to platform-specific skills based on project needs.

47.3K 2.7K
View
mobile-design logo
sickn33/antigravity-awesome-skills

mobile-design

(Mobile-First · Touch-First · Platform-Respectful)

47.3K 2.6K
View
ui-ux-pro-max logo
sickn33/antigravity-awesome-skills

ui-ux-pro-max

ui ux pro max

47.3K 2.5K
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View