Hig Components Search

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

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](https://raintree.technology) · [More developer tools](https://raintree.technology)

<!-- hig-doctor:attribution -->

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/page-controls.

This file is a structured index of that content, snapshot 2025-02-02.

Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Page controls

Best practices

Use page controls to represent movement between an ordered list of pages.

Center a page control at the bottom of the view or window.

Customizing indicators

Make sure custom indicator images are simple and clear.

Customize the default indicator image only when it enhances the page control’s overall meaning.

Avoid using more than two different indicator images in a page control.

Avoid coloring indicator images.

Platform considerations

iOS, iPadOS

Avoid animating page transitions during scrubbing.

• Automatic — Displays the background only when people interact with the control. Use this style when the page control isn’t the primary navigational element in the UI.

• Prominent — Always displays the background. Use this style only when the control is the primary navigational control in the screen.

• Minimal — Never displays the background. Use this style when you just want to show the position of the current page in the list and you don’t need to provide visual feedback during scrubbing.

Avoid supporting the scrubber when you use the minimal background style.

tvOS

Use page controls on collections of full-screen pages.

watchOS

Use vertical pagination to separate multiple views into distinct, purposeful pages.

Consider limiting the content of an individual page to a single screen height.

---

<!-- hig-doctor:canonical-footer --> For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/page-controls

<!-- hig-doctor:attribution -->

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/path-controls.

This file is a structured index of that content, snapshot 2025-02-02.

Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Path controls

Standard.

Pop up.

Best practices

Use a path control in the window body, not the window frame.

---

<!-- hig-doctor:canonical-footer --> For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/path-controls

<!-- hig-doctor:attribution -->

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/search-fields.

This file is a structured index of that content, snapshot 2025-02-02.

Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

Search fields

Best practices

Display placeholder text that describes the type of information people can search for.

If possible, start search immediately when a person types.

Consider showing suggested search terms before search begins, or as a person types.

Simplify search results.

Consider letting people filter search results.

Scope controls and tokens

• A _scope control_ acts like a segmented control for choosing a category for the search.

• A _token_ is a visual representation of a search term that someone can select and edit, and acts as a filter for any additional terms in the search.

Use a scope control to filter among clearly defined search categories.

Default to a broader scope and let people refine it as they need.

Use tokens to filter by common search terms or items.

Consider pairing tokens with search suggestions.

Platform considerations

iOS

• In a tab bar at the bottom of the screen

• In a toolbar at the bottom or top of the screen

• Directly inline with content

Search in a tab bar

Start with the search field focused to help people quickly find what they need.

Start with the search field unfocused to promote discovery and exploration.

Search in a toolbar

• You can include search in a bottom toolbar either as an expanded field or as a toolbar button, depending on how much space is available and how important search is to your app. When someone taps it, it animates into a search field above the keyboard so they can begin typing.

• You can include search in a top toolbar, also called a navigation bar, where it appears as a toolbar button. When someone taps it, it animates into a search field that appears either above the keyboard or inline at the top if there isn’t space at the bottom.

Place search at the bottom if there’s room.

Place search at the top when itʼs important to defer to content at the bottom of the screen, or thereʼs no bottom toolbar.

Search as an inline field

Place search as an inline field when its position alongside the content it searches strengthens that relationship.

Prefer placing search at the bottom.

When at the top, position an inline search field above the list it searches, and pin it to the top toolbar when scrolling.

iPadOS, macOS

Put a search field at the trailing side of the toolbar for many common uses.

Include search at the top of the sidebar when filtering content or navigation there.

Include search as an item in the sidebar or tab bar when you want an area dedicated to discovery.

In a search field in a dedicated area, consider immediately focusing the field when a person navigates to the section to help people search faster and locate the field itself more easily.

Account for window resizing with the placement of the search field.

tvOS

Provide suggestions to make searching easier.

---

<!-- hig-doctor:canonical-footer --> For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/search-fields