Menu Block
Source: https://dripyard.com/docs/dripyard-base/components/menu-block
Theme: dripyard-base
A semantic navigation container for menu items with accessibility features, optional title display, and theme support.
Usage
{{ include('dripyard_base:menu-block', {
title: 'Navigation Menu',
show_title: true,
content: menu_content,
theme: 'light',
title_attributes: title_attributes,
title_suffix: title_suffix
}, with_context = false) }}
Props
| Property | Type | Required | Description |
|---|---|---|---|
title |
string | Yes | Menu title for accessibility labeling |
show_title |
boolean | No | Whether to visually display the title |
theme |
string | No | Theme variant: inherit, white, light, dark, black, primary |
title_attributes |
object | No | Additional attributes for the title element |
title_suffix |
string | No | Content to display after the title |
Slots
| Slot | Description |
|---|---|
content |
Menu content and navigation items |
Accessibility Features
- Semantic navigation: Uses `` element for proper landmark
- ARIA labeling: Navigation labeled by title via
aria-labelledby - Screen reader support: Title can be hidden visually but remain accessible
- Heading structure: Uses h2 element with h3 styling for proper hierarchy
- Unique IDs: Generates unique IDs for proper ARIA relationships
Title Behavior
- Visible title: Standard display when
show_titleis true - Hidden title: Uses
visually-hiddenclass whenshow_titleis false - Always accessible: Title always present for screen readers regardless of visibility
- Styling: Uses h3 visual styling on h2 semantic element
Theme Integration
- Conditional theming: Background and padding only applied when theme is set
- Rounded corners: Themed containers use medium border radius
- Background: Uses theme surface color for container background
- Text color: Title uses loud theme text color for emphasis