Link Group elements create organized collections of navigation links within your application. They help streamline navigation by providing structured access to internal pages and external resources, making it easy for users to move through your app.
What You'll Learn
- How to create and configure Link Groups
- Ways to customize link appearance and behavior
- Methods for organizing navigation structure
- Techniques for mobile-responsive design
Basic Configuration
Creating Link Groups
- Navigate to Pages in the Builder
- Select or create a page
- Click "+ Add Element"
- Choose "Link Group" from Navigation Elements
Link Types
- Internal Page Links
- Link to new pages
- Connect to existing pages
- Create modal popups
- External Links
- URLs to external websites
- External resources
- Third-party integrations
Link Management
Adding Links
- Choose link type:
- New page
- Existing page
- External URL
- Configure link settings
- Add icons (optional)
- Set link behavior
Link Properties
- Text Label: Custom button text
- Icon Options:
- Icon selection
- Position (left/right)
- Visual emphasis
- Window Behavior: Same/new window
- Preview Settings: Active state display
Display Options
Format Types
- Standard Buttons
- Separated buttons
- Tabbed Interface
- Persistent navigation
- Active state indicators
Visual Elements
- Title: Optional header text
- Description: Contextual information
- Icons: Visual indicators
- Active States: Visual feedback
Advanced Features
Auto-Link Functionality
- First link auto-selection
- Active state highlighting
- Child page persistence
- Navigation state management
Mobile Responsiveness
- Adaptive layouts
- Touch-friendly targets
- Collapsible menus
- Visibility controls
Customization
Individual Link Design
- Background colors
- Text styling
- Border configuration
- Hover states
- Active indicators
Best Practices
Design Guidelines
- Consistent styling
- Clear labeling
- Logical grouping
- Mobile consideration
Navigation Structure
- Intuitive organization
- Minimal depth
- Clear hierarchy
- User-friendly paths
Implementation Tips
Setup Guidelines
- Plan navigation structure
- Add individual links
- Test user flows
Mobile Optimization
- Confirm color differentiation
- Test touch targets
- Verify spacing
- Check collapsible behavior
Warning: Deleting a link connected to a child page will also delete that page unless it's linked elsewhere in your app.
Tip: Use the Live App Design settings to maintain consistent styling across all Link Groups.
Related Resources
- [Page Layout Guide]
- [Navigation Best Practices]
- [Mobile Design Guidelines]
- [Live App Design Documentation]