EletroDS1.0.18-beta
Blocks

Header

A complete header block with navigation, branding, and user profile.

A complete header block with navigation, branding, and user profile for enterprise applications.

Usage

The Header block provides a fully-featured application header with navigation, branding, and user avatar.

Loading preview... 
<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="navigationItems"
    :profile-items="profileItems"
    :site-map-items="siteMapItems"
  />
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  email: "marcela.coenca@exemplo.com",
  acronym: "MC",
  culture: "pt-BR",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};

const navigationItems = [
  {
    id: "1",
    icon: "lucide:layout-dashboard",
    label: "Dashboard",
    active: true,
    url: "/",
    visible: true,
  },
  { separator: true },
  {
    id: "2",
    icon: "lucide:file-input",
    label: "Transações",
    url: "/transactions",
    visible: true,
  },
  {
    id: "3",
    icon: "lucide:store",
    label: "Fornecedores",
    url: "/suppliers",
    visible: true,
  },
  {
    id: "4",
    icon: "lucide:shopping-bag",
    label: "Catálogos",
    url: "/catalogs",
    visible: true,
  },
  {
    id: "5",
    icon: "lucide:users",
    label: "Usuários",
    url: "/users",
    visible: true,
  },
  {
    id: "6",
    icon: "lucide:ellipsis",
    label: "Mais",
    siteMap: true,
    visible: true,
  },
  { separator: true },
  {
    id: "7",
    icon: "lucide:messages-square",
    label: "Mensagens",
    url: "/messages",
    visible: true,
    badge: { text: "10" },
  },
  {
    id: "8",
    icon: "lucide:wand-sparkles",
    label: "Genius",
    url: "/genius",
    visible: true,
  },
];

const profileItems = [
  {
    $id: "1",
    label: "Trocar Conta",
    url: "/switch-account",
    icon: { class: "lucide:arrow-left-right", color: "#6b7280" },
  },
  {
    $id: "2",
    label: "Português - BR",
    name: "locale",
    icon: { class: "lucide:globe", color: "#6b7280" },
    children: [
      { label: "English - US", active: false, url: "/change-locale/en-US" },
      { label: "Español - ES", active: false, url: "/change-locale/es-ES" },
      { label: "Português - PT", active: false, url: "/change-locale/pt-PT" },
      { label: "Español - MX", active: false, url: "/change-locale/es-MX" },
      { label: "Français - FR", active: false, url: "/change-locale/fr-FR" },
    ],
  },
  {
    $id: "3",
    label: "Substituição",
    url: "/substitution",
    icon: { class: "lucide:refresh-cw", color: "#6b7280" },
    children: [
      { label: "de Usuário", active: false, url: "/substitution/user" },
      { label: "de Workflow", active: false, url: "/substitution/workflow" },
      { label: "Temporária", active: false, url: "/substitution/temporary" },
    ],
  },
  {
    $id: "4",
    label: "Ver Perfil",
    url: "/profile",
    icon: { class: "lucide:user", color: "#6b7280" },
  },
  {
    $id: "5",
    label: "Configurações Gerais",
    url: "/settings",
    icon: { class: "lucide:settings", color: "#6b7280" },
  },
  {
    $id: "6",
    label: "Novidades e Atualizações",
    url: "/updates",
    icon: { class: "lucide:gift", color: "#6b7280" },
  },
  {
    $id: "7",
    label: "Encerrar Sessão",
    url: "/logout",
    icon: { class: "lucide:log-out", color: "#6b7280" },
  },
];

const siteMapItems = [
  {
    id: "1",
    name: "compras",
    description: "Compras",
    children: [
      {
        id: "1-1",
        name: "requisicoes",
        description: "Requisições de Compra",
        url: "/compras/requisicoes",
        children: [],
      },
      {
        id: "1-2",
        name: "cotacoes",
        description: "Cotações",
        url: "/compras/cotacoes",
        children: [],
      },
      {
        id: "1-3",
        name: "pedidos",
        description: "Pedidos de Compra",
        url: "/compras/pedidos",
        children: [],
      },
    ],
  },
  {
    id: "2",
    name: "fornecedores",
    description: "Fornecedores",
    children: [
      {
        id: "2-1",
        name: "cadastro",
        description: "Cadastro de Fornecedores",
        url: "/fornecedores/cadastro",
        children: [],
      },
      {
        id: "2-2",
        name: "avaliacao",
        description: "Avaliação de Fornecedores",
        url: "/fornecedores/avaliacao",
        children: [],
      },
    ],
  },
];
</script>

User

Configure user information displayed in the avatar area.

type User = {
  id: string;
  name: string;
  role?: string;
  email?: string;
  acronym: string;
  culture?: string;
  badge: {
    variant: string;
    icon: string;
  };
};

<template>
  <MeHeader
    :user="user"
    :navigation-items="[]"
    :profile-items="[]"
  />
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  email: "marcela.coenca@exemplo.com",
  acronym: "MC",
  culture: "pt-BR",
  badge: { variant: "warning", icon: "" },
};
</script>

Brand

Configure the brand appearance including logo and colors.

type Brand = {
  logo: string;
  link: string;
  newTab: boolean;
  iconColor?: string;
  background?: {
    primaryColor?: string;
    secondaryColor?: string;
    mainImage?: string;
    repeatImage?: string;
  };
};

<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="[]"
    :profile-items="[]"
  />
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  acronym: "MC",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};
</script>

Navigation Items

Configure navigation items with icons, labels, badges, and separators.

type NavigationItem = {
  id?: string;
  icon?: string;
  label?: string;
  active?: boolean;
  click?: (item: NavigationItem) => void;
  siteMap?: boolean;
  linkName?: string;
  url?: string;
  target?: string;
  badge?: { text: string };
  visible?: boolean;
};

type NavigationSeparatorItem = {
  separator?: boolean;
};

type NavigationItemOrSeparator = NavigationItem | NavigationSeparatorItem;

<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="navigationItems"
    :profile-items="[]"
  />
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  acronym: "MC",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};

const navigationItems = [
  {
    id: "1",
    icon: "lucide:layout-dashboard",
    label: "Dashboard",
    active: true,
    url: "/",
    visible: true,
  },
  { separator: true },
  {
    id: "2",
    icon: "lucide:file-input",
    label: "Transações",
    url: "/transactions",
    visible: true,
  },
  {
    id: "3",
    icon: "lucide:store",
    label: "Fornecedores",
    url: "/suppliers",
    visible: true,
  },
  {
    id: "4",
    icon: "lucide:messages-square",
    label: "Mensagens",
    url: "/messages",
    visible: true,
    badge: { text: "10" },
  },
];
</script>

Profile Items

Configure profile dropdown menu items.

type ProfileItem = {
  $id?: string;
  label?: string;
  click?: () => void;
  url?: string;
  icon?: {
    class: string;
    color: string;
  };
  active?: boolean;
  name?: string;
  children?: ProfileItem[];
  target?: string;
};

<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="[]"
    :profile-items="profileItems"
  />
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  acronym: "MC",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};

const profileItems = [
  {
    $id: "1",
    label: "Ver Perfil",
    url: "/profile",
    icon: { class: "lucide:user", color: "#6b7280" },
  },
  {
    $id: "2",
    label: "Configurações Gerais",
    url: "/settings",
    icon: { class: "lucide:settings", color: "#6b7280" },
  },
  {
    $id: "3",
    label: "Idioma",
    name: "locale",
    icon: { class: "lucide:globe", color: "#6b7280" },
    children: [
      { label: "English - US", active: false, url: "/change-locale/en-US" },
      { label: "Português - BR", active: true, url: "/change-locale/pt-BR" },
      { label: "Español - ES", active: false, url: "/change-locale/es-ES" },
    ],
  },
  {
    $id: "4",
    label: "Encerrar Sessão",
    url: "/logout",
    icon: { class: "lucide:log-out", color: "#6b7280" },
  },
];
</script>

Sitemap Items

Configure the site map for expanded navigation.

type SiteMapItem = {
  id: string;
  name: string;
  description: string;
  url?: string;
  target?: string;
  children: SiteMapItem[];
};

<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="navigationItems"
    :profile-items="[]"
    :site-map-items="siteMapItems"
  />
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  acronym: "MC",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};

const navigationItems = [
  {
    id: "1",
    icon: "lucide:layout-dashboard",
    label: "Dashboard",
    active: true,
    url: "/",
    visible: true,
  },
  {
    id: "2",
    icon: "lucide:ellipsis",
    label: "Mais",
    siteMap: true,
    visible: true,
  },
];

const siteMapItems = [
  {
    id: "1",
    name: "compras",
    description: "Compras",
    children: [
      {
        id: "1-1",
        name: "requisicoes",
        description: "Requisições de Compra",
        url: "/compras/requisicoes",
        children: [],
      },
      {
        id: "1-2",
        name: "cotacoes",
        description: "Cotações",
        url: "/compras/cotacoes",
        children: [],
      },
      {
        id: "1-3",
        name: "pedidos",
        description: "Pedidos de Compra",
        url: "/compras/pedidos",
        children: [],
      },
    ],
  },
  {
    id: "2",
    name: "fornecedores",
    description: "Fornecedores",
    children: [
      {
        id: "2-1",
        name: "cadastro",
        description: "Cadastro de Fornecedores",
        url: "/fornecedores/cadastro",
        children: [],
      },
      {
        id: "2-2",
        name: "avaliacao",
        description: "Avaliação de Fornecedores",
        url: "/fornecedores/avaliacao",
        children: [],
      },
    ],
  },
];
</script>

Examples

Custom Brand

Use the brand slot to replace the default brand area with your own content.

<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="navigationItems"
    :profile-items="profileItems"
  >
    <template #brand="{ brand }">
      <div class="flex items-center gap-3 px-4">
        <img :src="brand.logo" alt="Logo" class="h-8" />
        <span class="text-white font-semibold text-lg"> Meu Portal </span>
      </div>
    </template>
  </MeHeader>
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  acronym: "MC",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};

const navigationItems = [
  {
    id: "1",
    icon: "lucide:layout-dashboard",
    label: "Dashboard",
    active: true,
    url: "/",
    visible: true,
  },
  { separator: true },
  {
    id: "2",
    icon: "lucide:file-input",
    label: "Transações",
    url: "/transactions",
    visible: true,
  },
  {
    id: "3",
    icon: "lucide:store",
    label: "Fornecedores",
    url: "/suppliers",
    visible: true,
  },
];

const profileItems = [
  {
    $id: "1",
    label: "Ver Perfil",
    url: "/profile",
    icon: { class: "lucide:user", color: "#6b7280" },
  },
  {
    $id: "2",
    label: "Encerrar Sessão",
    url: "/logout",
    icon: { class: "lucide:log-out", color: "#6b7280" },
  },
];
</script>

Custom Navigation Item

Use the #navigation-item slot to customize the rendering of each navigation item. The slot exposes the item (NavigationItem) and isActive (boolean) properties.

<template>
  <MeHeader
    :user="user"
    :brand="brand"
    :navigation-items="navigationItems"
    :profile-items="profileItems"
  >
    <template #navigation-item="{ item, isActive }">
      <a
        :href="item.url ?? '#'"
        class="flex items-center gap-2 px-3 h-full transition-colors"
        :class="
          isActive
            ? 'border-b-2 border-white text-white font-bold'
            : 'text-white/70 hover:text-white'
        "
      >
        <UIcon v-if="item.icon" :name="item.icon" class="size-5" />
        <span>{{ item.label }}</span>
        <UBadge v-if="item.badge?.text" color="error" size="sm">
          {{ item.badge.text }}
        </UBadge>
      </a>
    </template>
  </MeHeader>
</template>

<script setup>
const user = {
  id: "1",
  name: "Marcela Coenca",
  role: "Compradora",
  acronym: "MC",
  badge: { variant: "warning", icon: "" },
};

const brand = {
  logo: "https://geocdntrunk.me.com.br/ME//CSS/images/logos/logo_header.svg",
  link: "/",
  newTab: false,
  iconColor: "#FFFFFF",
};

const navigationItems = [
  {
    id: "1",
    icon: "lucide:layout-dashboard",
    label: "Dashboard",
    active: true,
    url: "/",
    visible: true,
  },
  { separator: true },
  {
    id: "2",
    icon: "lucide:inbox",
    label: "Inbox",
    url: "/inbox",
    visible: true,
    badge: { text: "5" },
  },
  {
    id: "3",
    icon: "lucide:settings",
    label: "Configurações",
    url: "/settings",
    visible: true,
  },
];

const profileItems = [
  {
    $id: "1",
    label: "Ver Perfil",
    url: "/profile",
    icon: { class: "lucide:user", color: "#6b7280" },
  },
  {
    $id: "2",
    label: "Encerrar Sessão",
    url: "/logout",
    icon: { class: "lucide:log-out", color: "#6b7280" },
  },
];
</script>

API

Props

PropDefaultType
userUser
User data to display in avatar
brandBrand
Brand configuration (logo, colors, etc). Optional when using the #brand slot.
navigationItemsNavigationItemOrSeparator[]
Navigation items to display
profileItemsProfileItem[]
Profile menu items
siteMapItems[]SiteMapItem[]
Site map items for expanded navigation

Slots

SlotType
brand{ brand: Brand }
navigation-item{ item: NavigationItem }

Figma

Design resources and assets for EletroDS.

Login

A login block with split layout (image + form) and MeLoginForm.