Child Pages
Child Pages provide organized navigation to sub-pages and related content within a website section. Use them to help users discover and access child pages, sub-sections, and related resources in a structured, visually appealing way. The component leverages the quick-link component structure but is specifically designed for hierarchical page navigation, supporting icons and descriptions to enhance usability and content organization.
Do
- Use clear, descriptive page titles that accurately represent the destination content (e.g., "Business Licenses", "Health Cards").
- Include helpful descriptions that provide context about what users will find on each child page.
- Use meaningful icons that visually represent the page content and improve scanning efficiency.
- Maintain consistent visual hierarchy across all child page items within the same section.
- Group related child pages logically to match users' mental models of your site structure.
- Keep descriptions informative but concise to help users make quick decisions about where to navigate.
- Test navigation paths to ensure child pages deliver on the promises made in their descriptions.
- Use the grid layout appropriately — typically 3 columns for main content areas, 2 columns when in sidebar layouts.
- Ensure mobile responsiveness with appropriate touch targets and readable text at all screen sizes.
Don't
- Don't use vague page titles like "More Information", "Additional Resources", or "Other Pages" without specific context.
- Don't overcrowd sections — limit to
18child pages per group for optimal cognitive load. - Don't use icons that don't clearly relate to the specific page content or function.
- Don't mix different visual styles within the same child pages group.
- Don't create orphaned pages — ensure all child pages listed are actually accessible and contain relevant content.
- Don't use outdated descriptions — regularly review and update child page summaries to reflect current content.
- Don't rely solely on icons to convey page purpose — always include descriptive titles and body text.
- Don't make descriptions too lengthy — keep them to one or two sentences that quickly communicate the page's value.
- Don't forget to maintain the hierarchy — child pages should feel subordinate to their parent page in the navigation structure.
Default
Child pages as a three-column grid when placed within the full width of the container. Demonstrates the standard layout for main content areas with icons, titles, and descriptions arranged in an optimal 3-column responsive grid pattern.
Loading preview...
Layout in Small Container
Child pages in a small container without icons (main column of sidebar layout). Demonstrates how child pages adapt to narrower spaces like the main column when a sidebar is present, using a 2-column layout with text-only format for optimal readability.
Loading preview...
Accessibility Best Practices
Screen Reader Support
- Descriptive page titles: Use clear, specific titles that accurately represent the child page content when read out of context by screen readers.
- Meaningful descriptions: Provide additional context through body text that helps users understand what they'll find on each child page.
- Proper link semantics: Use semantic HTML with appropriate link elements and ARIA attributes for hierarchical navigation.
- Icon accessibility: Ensure icons have proper alt text or are marked as decorative when they don't add semantic meaning to the page relationship.
Keyboard Navigation
- Full keyboard access: All child page links are accessible via Tab key navigation and activated with Enter or Space.
- Logical tab order: Child page links follow the natural reading order and visual hierarchy of the page structure.
- Focus indicators: Clear visual focus states help keyboard users identify their current position within the child page navigation.
- Skip navigation: Consider skip links for large groups of child pages to improve navigation efficiency through page hierarchies.
Visual Accessibility
- High contrast ratios: All text meets WCAG AA contrast requirements against background colors for optimal readability.
- Multiple visual cues: Page relationships are conveyed through text, icons, and layout structure, not color alone.
- Adequate sizing: Touch targets meet minimum size requirements (44px) for mobile accessibility and easy interaction.
- Clear visual hierarchy: Child pages maintain consistent visual distinction from parent pages and other navigation elements.
Content Guidelines
- Hierarchical language: Use clear, specific page titles that reflect their relationship to the parent page and site structure.
- Consistent terminology: Use the same words for the same types of child pages throughout your site navigation.
- Appropriate context: Provide enough information so users can make informed decisions about which child page to visit.
- Scannable content: Structure text so users can quickly identify relevant child pages through visual scanning and understand page relationships.
Implementation Considerations
- Responsive design: Child pages adapt gracefully to different screen sizes and container widths (3-column to 2-column to single column).
- Maintenance planning: Establish processes for regularly reviewing child page relationships and updating content as site structure evolves.