Introduction
Slots enable designers to extend and customize Nova components by inserting custom or predefined partial content directly into specific areas within a Nova component. Using slots promotes flexibility, allowing components to be adapted without changing their foundational code structure.
Practical examples
Popover implementation
The Popover component includes a flexible slot designed to be fully replaced by any component of your choice. This allows popovers to serve multiple use cases, such as navigation, forms, or content previews.
In the following example, the slot is swapped with a vertical navigation template, demonstrating how templates and slots work hand in hand to deliver tailored user experiences.
Dialog
The Dialog component features three distinct slots.
These slots allow full control over the visual and functional structure of dialogs, enabling reuse of the same base component for various contextual scenarios.
Navigation with submenu
This example shows how slots support advanced composition: by injecting a more complex child component into a predefined slot, designers can extend base components with new behaviors while maintaining design consistency.
Benefits
- Facilitates greater flexibility through composability.
- Reduces complexity by clearly defining insertion points for customization.
- Empowers designers to experiment quickly with content variations.
Guidelines
- Use slots when configuration is insufficient to meet complex design needs.
- Leverage partials inside slots to maintain consistency and reduce duplication.
- Pair slots with templates when scaling reusable patterns across multiple contexts.
Slots are a foundational concept of composability in Nova, empowering teams to deliver custom and consistent design outcomes.