Layout Components
Layout components are specialized components that handle the structural arrangement and navigation of the interface. They work alongside organisms to create the overall page structure.
What are Layout Components?
Layout components are:
- Structural: Handle the arrangement and positioning of content
- Navigation-focused: Often related to site navigation and wayfinding
- Theme-aware: May adapt to different themes or contexts
- Infrastructure: Provide the foundation for page layouts
Examples
- Navigation components (desktop menu, mobile menu)
- Layout wrappers (containers, grids, sidebars)
- Theme-aware components (logos that change with theme)
- Accordion components for collapsible sections
Components
- DesktopNavigation - Desktop navigation bar with logo, search, and nav buttons
- MobileNavigation - Mobile navigation with hamburger menu and drawer
- NavLink - Reusable navigation link component with CSLP support
- UtilityLink - Reusable utility navigation link component
- FooterAccordion - Accordion component for footer mobile navigation
- ThemeAwareLogo - Logo component that adapts to light/dark theme
Design Principles
- Structure over content: Focus on layout and arrangement
- Responsive: Handle different screen sizes and breakpoints
- Navigation: Often related to site navigation patterns
- Reusable: Used across multiple pages and contexts
When to Create a Layout Component
Create a layout component when:
- The component handles structural arrangement
- It's related to navigation or wayfinding
- It needs to adapt to different themes or contexts
- It provides infrastructure for page layouts
Relationship to Other Components
Layout components:
- Support organisms: Used by organisms like
HeaderandFooter - Use atoms: May use atoms like
IconsandButton - Provide structure: Create the framework for page layouts
Examples of Usage
DesktopNavigationandMobileNavigationare used byMainNavigationorganismFooterAccordionis used byFooterorganismThemeAwareLogois used by navigation components