shadow
wje-aside is a layout primitive for supporting content next to wje-main. It is typically used for secondary navigation, filters, summaries, state panels, or helper actions.
The example below shows several common layout combinations with wje-container, wje-header, wje-main, and wje-footer. Pay special attention to the width attribute, which controls the side-column width in each layout.
- Content is projected through the default slot.
- The
width attribute populates --wje-aside-width, which controls the resulting panel width.
- When
fixed is present, the component uses position: fixed on desktop breakpoints.
top works together with fixed and sets the top offset through --wje-aside-top.- On smaller viewports the aside is hidden by default. The
top-start variant and open class affect layout, not built-in state management.
- Use it where secondary content genuinely belongs beside
main, not instead of it.
- Preserve a logical document structure and focus order.
- If the panel becomes a mobile overlay controlled by parent logic, make sure focus management is handled at that higher level.
- Choose width intentionally based on the content type; navigation often works best with a stable fixed width, while richer supporting content may benefit from token-based sizing.
- If you use
fixed, also think about top so the aside does not overlap a fixed header.
- Test mobile behavior separately; a good desktop layout does not automatically translate into good small-screen UX.
- Keep the side panel for supporting content, not for the one piece of information users absolutely need to finish the main task.
| Description | Pins the aside in a fixed desktop position instead of keeping it in normal flow. |
| Attribute | fixed |
| Type | boolean |
| Default | - |
| Description | Sets the top offset used together with the fixed layout mode. |
| Attribute | top |
| Type | string |
| Default | - |
| Description | Selects an alternate layout variant such as the mobile top-start drawer style. |
| Attribute | variant |
| Type | string |
| Default | - |
| Description | Sets the width of the aside column, typically through a CSS length or design token. |
| Attribute | width |
| Type | string |
| Default | - |
No events available for this component.
No public methods available for this component.
No CSS shadow parts available for this component.
| Name | Description |
|---|
--wje-aside-width | Controls the width of the aside column. |
--wje-aside-top | Controls the top offset of a fixed aside. |
--wje-aside-border-color | Controls the border color of the aside. |
--wje-aside-border-width | Controls the border width of the aside. |
--wje-aside-border-style | Controls the border style of the aside. |
| Name | Description |
|---|
default | Slot for the aside content. |