Layout

Page skeleton: LhLayout plus LhLayoutHeader / LhLayoutAside / LhLayoutMain / LhLayoutFooter. All use semantic tags (header / aside / main / footer), so landmark roles come for free.

Top / content / bottom

Vertical

Header

Content

Footer

<script setup lang="ts">
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>Header</LhLayoutHeader>
    <LhLayoutMain>Content</LhLayoutMain>
    <LhLayoutFooter>Footer</LhLayoutFooter>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>Header</LhLayoutHeader>
    <LhLayoutMain>Content</LhLayoutMain>
    <LhLayoutFooter>Footer</LhLayoutFooter>
  </LhLayout>
</template>

Direction

direction controls how children are laid out: horizontal side by side (default) or vertical stacked. The direction switches to vertical automatically when an LhLayoutAside is present.

Direction

Horizontal

Horizontal

Vertical

Vertical

<script setup lang="ts">
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>Horizontal</LhLayoutMain>
    <LhLayoutMain>Horizontal</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>Vertical</LhLayoutMain>
    <LhLayoutMain>Vertical</LhLayoutMain>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout direction="horizontal">
    <LhLayoutMain>Horizontal</LhLayoutMain>
    <LhLayoutMain>Horizontal</LhLayoutMain>
  </LhLayout>
  <LhLayout direction="vertical">
    <LhLayoutMain>Vertical</LhLayoutMain>
    <LhLayoutMain>Vertical</LhLayoutMain>
  </LhLayout>
</template>

With aside

When an LhLayoutAside is present the parent automatically switches to the vertical direction.

Aside

Header

Aside

Content

<script setup lang="ts">
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>Header</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="Side navigation">Aside</LhLayoutAside>
      <LhLayoutMain>Content</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

<script>
export default {}
</script>

<template>
  <LhLayout>
    <LhLayoutHeader>Header</LhLayoutHeader>
    <LhLayout>
      <LhLayoutAside :width="140" aria-label="Side navigation">Aside</LhLayoutAside>
      <LhLayoutMain>Content</LhLayoutMain>
    </LhLayout>
  </LhLayout>
</template>

API

LhLayout Props

Attribute	Description	Type	Default
direction	Direction (auto vertical when an Aside is present)	"horizontal" | "vertical"	'horizontal'
sx	Quick layout props	LhSxProps	—

LhLayoutAside Props

Attribute	Description	Type	Default
width	Aside width	number | string	—
ariaLabel	Accessible name (landmark labelling)	string	—
sx	Quick layout props	LhSxProps	—

Header / Main / Footer take only sx.

Accessibility

• Semantic tags map directly to landmark roles
• When multiple asides exist, label them with ariaLabel

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/layout/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhLayoutProps

export interface LhLayoutProps {
  direction?: 'horizontal' | 'vertical'
  sx?: LhSxProps
}

LhLayoutSectionProps

export interface LhLayoutSectionProps {
  sx?: LhSxProps
}

LhLayoutAsideProps

export interface LhLayoutAsideProps extends LhLayoutSectionProps {
  width?: number | string
  ariaLabel?: string
}