UIHeader

UIHeader

A header component that provides consistent styling for page and section titles, with support for breadcrumbs, actions, and navigation.

<template>
  <UIHeader
    :title="'Dashboard'"
    :description="'Overview of your account'"
    :backLink="'/'"
    :showDivider="true"
  >
    <template #breadcrumb>
      <UIBreadcrumb :routes="breadcrumbRoutes" />
    </template>

    <template #actions>
      <div class="flex items-center space-x-4">
        <UIButton type="default">
          Export
        </UIButton>
        <UIButton type="primary">
          Create New
        </UIButton>
      </div>
    </template>

    <template #extra>
      <div class="flex items-center space-x-4">
        <UISearch
          v-model="searchQuery"
          placeholder="Search..."
        />
        <UIFilterDropdown
          v-model="filters"
          :options="filterOptions"
        />
      </div>
    </template>
  </UIHeader>
</template>

<script setup lang="ts">
const searchQuery = ref('')
const filters = ref([])
const breadcrumbRoutes = [
  { path: '/', title: 'Home' },
  { path: '/dashboard', title: 'Dashboard' }
]
const filterOptions = [
  { label: 'All', value: 'all' },
  { label: 'Active', value: 'active' },
  { label: 'Archived', value: 'archived' }
]
</script>

Props

• title (string): Header title
• description (string): Header description
• backLink (string): Back navigation link
• showDivider (boolean): Show bottom divider
• sticky (boolean): Enable sticky positioning
• bordered (boolean): Show border
• size (‘small’ | ‘medium’ | ‘large’): Header size
• loading (boolean): Show loading state
• compact (boolean): Use compact layout

Events

• back: Emitted when back button is clicked
• titleClick: Emitted when title is clicked

Slots

• breadcrumb: Breadcrumb navigation
• title: Custom title content
• description: Custom description content
• actions: Primary actions
• extra: Additional content
• divider: Custom divider content

Usage Examples

1. Simple Header:

<template>
  <UIHeader title="Settings">
    <template #description>
      Manage your account settings and preferences
    </template>
  </UIHeader>
</template>

2. Header with Navigation:

<template>
  <UIHeader
    title="Edit Profile"
    backLink="/settings"
    @back="handleBack"
  >
    <template #breadcrumb>
      <UIBreadcrumb :routes="routes" />
    </template>
  </UIHeader>
</template>

3. Header with Actions:

<template>
  <UIHeader title="Products">
    <template #actions>
      <UIButton type="primary">
        Add Product
      </UIButton>
    </template>
    <template #extra>
      <UISearch v-model="search" />
    </template>
  </UIHeader>
</template>

4. Sticky Header:

<template>
  <UIHeader
    title="Messages"
    :sticky="true"
    class="bg-white"
  >
    <template #extra>
      <UITabs v-model="activeTab" />
    </template>
  </UIHeader>
</template>

Best Practices

1. Layout:

   • Keep titles clear and concise
   • Use description for additional context
   • Organize actions by importance
   • Maintain consistent spacing

2. Navigation:

   • Use breadcrumbs for deep navigation
   • Provide clear back navigation
   • Keep navigation consistent
   • Show current location

3. Actions:

   • Prioritize primary actions
   • Group related actions
   • Use appropriate button types
   • Consider mobile layouts

4. Responsiveness:

   • Adapt layout for mobile
   • Stack elements when needed
   • Hide less important elements
   • Maintain touch targets

5. Accessibility:

   • Use semantic headings
   • Provide ARIA labels
   • Ensure keyboard navigation
   • Maintain color contrast