Utilize o componente Header para fornecer uma área de navegação principal e exibir informações essenciais no topo da página. Este componente é crucial para orientar os utilizadores, oferecer acesso rápido a funcionalidades importantes e estabelecer a identidade visual do site ou aplicação.
Inclui links ou menus para as principais seções do site, facilita a navegação.
Apresenta o logotipo e possivelmente o nome da empresa ou aplicação, reforçando a marca.
Pode incluir elementos como pesquisa, ícone de notificações, acesso ao perfil do utilizador, e outras ações rápidas.
Incorpore o componente Header sempre que precisar fornecer uma estrutura de navegação clara e acessível, além de destacar a identidade da sua marca, melhorando a experiência do utilizador na sua interface.
Ao criar um novo header pode usar três classes com diferentes tamanhos, .large, .medium e .small.
Como mostra no código abaixo, tem de implementar o código para mobile e desktop para permitir o responsive de forma correta.
Abaixo temos um exemplo de um menu com menu items e acções (alteração de idioma).
<div class="gra-desktop-header large">
<div class="header-content gra-container">
<a class="logo_a gra-flex-grow" href="#">
<div class="logo"><img src="/img/logo_gra_design_system.png" alt="logo"></div>
</a>
<div class="menus_desktop">
<ul class="menu">
<li class="menu-first-level"><a href="#">Opção 1</a></li>
<li class="menu-first-level">
Opção 2<i class="icon-chevron-down-small arrow-down"></i>
<ul>
<li><a href="#">subopção 1</a></li>
<li class="gra-flex-row">
<span class="gra-flex-grow">subopção 2</span>
<i class="icon-chevron-left-small arrow-right"></i>
<ul>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
<li><a href="#">sub-subopção4</a></li>
</ul>
</li>
<li><a href="#">subopção 3</a></li>
<li class="gra-flex-row">
<span class="gra-flex-grow">subopção 4</span>
<i class="icon-chevron-left-small arrow-right"></i>
<ul>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
</ul>
</li>
<li><a href="#">subopção 5</a></li>
<li><a href="#">subopção 6</a></li>
<li><a href="#">subopção 7</a></li>
</ul>
</li>
<li class="menu-first-level"><a href="#">Opção 3</a></li>
<li class="menu-first-level"><a href="#">Opção 4</a></li>
<li class="menu-first-level"><a href="#">Opção 5</a></li>
<li class="menu-first-level"><a href="#">Opção 6</a></li>
<li class="menu-first-level"><a href="#">Opção 7</a></li>
<div class="menuActions">
<li class="menu-first-level"><a href="#">EN</a></li>
</div>
</ul>
</div>
</div>
</div>
NOTA: Pode alterar o tema do menu para primary acrescentanto a classe header-primary.
<div class="gra-desktop-header header-primary large">
<div class="header-content gra-container">
...
</div>
</div>
<div class="gra-mobile-header">
<div class="mobile-header">
<a class="logo_a" href="/">
<div class="logo"><img src="/img/logo_gra_design_system.png" alt="logo"></div>
</a>
<div class="menus_mobile">
<div class="menuActionsMobile">
<a class="gra-link">
EN
</a>
</div>
<div class="gra-link">
<i class="icon-menu hamburgerPic"></i>
<i class="icon-times menuClosePic"></i>
</div>
</div>
</div>
<div class="menu_mobile display-all-menu">
<div class="display-menu">
<ul class=" menu-mobile">
<li class="menu-first-level-mobile"><a href="#">Opção 1</a></li>
<li class="menu-first-level-mobile withChilds">
<span class="gra-flex-grow">Opção 2</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_1">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>Opção 2</span>
</li>
<li><a href="#">subopção 1</a></li>
<li class="gra-flex-row withSubmenu">
<span class="gra-flex-grow">subopção 2</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_2">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>subopção 2</span>
</li>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
<li><a href="#">sub-subopção4</a></li>
</ul>
</li>
<li><a href="#">subopção 3</a></li>
<li class="gra-flex-row withSubmenu">
<span class="gra-flex-grow">subopção 4</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_2">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>subopção 4</span>
</li>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
</ul>
</li>
<li><a href="#">subopção 5</a></li>
<li><a href="#">subopção 6</a></li>
<li><a href="#">subopção 7</a></li>
</ul>
</li>
<li class="menu-first-level-mobile"><a href="#">Opção 3</a></li>
<li class="menu-first-level-mobile"><a href="#">Opção 4</a></li>
<li class="menu-first-level-mobile"><a href="#">Opção 5</a></li>
<li class="menu-first-level-mobile"><a href="#">Opção 6</a></li>
<li class="menu-first-level-mobile"><a href="#">Opção 7</a></li>
<a class="logout_link gra-link" href="#"><i class="icon-logout"></i>Terminar sessão</a>
</ul>
</div>
</div>
</div>
Abaixo temos um exemplo de um menu com menu items, acções (search e modo escuro/claro) e o user com login.
<div class="gra-desktop-header large">
<div class="header-content gra-container">
<a class="logo_a gra-flex-grow" href="#">
<div class="logo"><img src="/img/logo_gra_design_system.png" alt="logo"></div>
</a>
<div class="menus_desktop">
<ul class="menu">
<li class="menu-first-level"><a href="#">Opção 1</a></li>
<li class="menu-first-level">
Opção 2<i class="icon-chevron-down-small arrow-down"></i>
<ul>
<li><a href="#">subopção 1</a></li>
<li class="gra-flex-row">
<span class="gra-flex-grow">subopção 2</span>
<i class="icon-chevron-left-small arrow-right"></i>
<ul>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
<li><a href="#">sub-subopção4</a></li>
</ul>
</li>
<li><a href="#">subopção 3</a></li>
<li class="gra-flex-row">
<span class="gra-flex-grow">subopção 4</span>
<i class="icon-chevron-left-small arrow-right"></i>
<ul>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
</ul>
</li>
<li><a href="#">subopção 5</a></li>
<li><a href="#">subopção 6</a></li>
<li><a href="#">subopção 7</a></li>
</ul>
</li>
<li class="menu-first-level"><a href="#">Opção 3</a></li>
<li class="menu-first-level"><a href="#">Opção 4</a></li>
<li class="menu-first-level"><a href="#">Opção 5</a></li>
<li class="menu-first-level"><a href="#">Opção 6</a></li>
<li class="menu-first-level"><a href="#">Opção 7</a></li>
<div class="menuActions">
<a href="#" class="searchBtn gra-margin-right-2xs" onclick="alert('É a pesquisa!');">
<i class="icon-search"></i>
</a>
<li><a class="gra-link changeTheme gra-margin-right-2xs">
<span class="gra-tooltip"><span class="tooltiptext bottomCenter">Modo escuro</span><i class="icon icon-moon toggleTheme"></i></span>
</a></li>
</div>
<div class="avatarBorderLeft"></div>
<div class="graAvatarWithoutFoto">
<i class="icon-user graAvatarLogo"></i>
</div>
</ul>
</div>
</div>
</div>
<div class="gra-mobile-header">
<div class="mobile-header">
<a class="logo_a" href="/">
<div class="logo"><img src="/img/logo_gra_design_system.png" alt="logo"></div>
</a>
<div class="menus_mobile">
<div class="menuActionsMobile">
<a href="#" class="searchBtn" onclick="alert('É a pesquisa pá');">
<i class="icon-search"></i>
</a>
<a class="gra-link changeTheme ">
<span class="gra-tooltip"><span class="tooltiptext bottomCenter">Modo escuro</span><i class="icon icon-moon toggleTheme"></i></span>
</a>
</div>
<div class="graAvatarWithoutFoto">
<i class="icon-user graAvatarLogo"></i>
</div>
</div>
<div class="gra-link">
<i class="icon-menu hamburgerPic"></i>
<i class="icon-times menuClosePic"></i>
</div>
</div>
<div class="menu_mobile display-all-menu">
<div class="display-menu">
<ul class=" menu-mobile">
<li class="menu-first-level-mobile"><a href="#">opção 1</a></li>
<li class="menu-first-level-mobile withChilds">
<span class="gra-flex-grow">opção 2</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_1">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>opção 2</span>
</li>
<li><a href="#">subopção 1</a></li>
<li class="gra-flex-row withSubmenu">
<span class="gra-flex-grow">subopção 2</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_2">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>subopção 2</span>
</li>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
<li><a href="#">sub-subopção4</a></li>
</ul>
</li>
<li><a href="#">subopção 3</a></li>
<li class="gra-flex-row withSubmenu">
<span class="gra-flex-grow">subopção 4</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_2">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>subopção 4</span>
</li>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
</ul>
</li>
<li><a href="#">subopção 5</a></li>
<li><a href="#">subopção 6</a></li>
<li><a href="#">subopção 7</a></li>
</ul>
</li>
<li class="menu-first-level-mobile"><a href="#">opção 3</a></li>
<li class="menu-first-level-mobile"><a href="#">opção 4</a></li>
<li class="menu-first-level-mobile"><a href="#">opção 5</a></li>
<li class="menu-first-level-mobile"><a href="#">opção 6</a></li>
<li class="menu-first-level-mobile"><a href="#">opção 7</a></li>
<a class="logout_link gra-link" href="#"><i class="icon-logout"></i>Terminar sessão</a>
</ul>
</div>
</div>
</div>
Abaixo temos um exemplo de um menu backoffice com menu items, acções (notificações e roda dentada com definições) e o user com login.
<div class="gra-desktop-header backoffice large">
<div class="header-content gra-container">
<a class="logo_a gra-flex-grow" href="#">
<div class="logo"><img src="/img/logo_gra_design_system.png" alt="logo"></div>
</a>
<div class="menus_desktop">
<ul class="menu">
<li class="menu-first-level"><a href="#">Opção 1</a></li>
<li class="menu-first-level">
Opção 2<i class="icon-chevron-down-small arrow-down"></i>
<ul>
<li><a href="#">subopção 1</a></li>
<li class="gra-flex-row">
<span class="gra-flex-grow">subopção 2</span>
<i class="icon-chevron-left-small arrow-right"></i>
<ul>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
<li><a href="#">sub-subopção4</a></li>
</ul>
</li>
<li><a href="#">subopção 3</a></li>
<li class="gra-flex-row">
<span class="gra-flex-grow">subopção 4</span>
<i class="icon-chevron-left-small arrow-right"></i>
<ul>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
</ul>
</li>
<li><a href="#">subopção 5</a></li>
<li><a href="#">subopção 6</a></li>
<li><a href="#">subopção 7</a></li>
</ul>
</li>
<li class="menu-first-level"><a href="#">Opção 3</a></li>
<li class="menu-first-level"><a href="#">Opção 4</a></li>
<li class="menu-first-level"><a href="#">Opção 5</a></li>
<div class="menuActions">
<a href="#" class="notificacao-desktop-alink " onclick="alert('É a notificação');">
<i class="icon-bell"></i>
<span class="gra-badge danger">25</span>
</a>
<li class="menu-first-level settings gra-margin-left-2xs">
<i class="icon-settings"></i>
<ul>
<li><a href="#">EN</a></li>
<li><a class="gra-link changeTheme">
<span class="gra-tooltip"><span class="tooltiptext bottomCenter">Modo escuro</span><i class="icon icon-moon toggleTheme"></i></span>
</a></li>
</ul>
</li>
</div>
</ul>
</div>
<div class="userBorderLeft">
<span class="credentials name">Nome utilizador</span>
<span class="credentials job">Administrador</span>
</div>
<a href="#" class="gra-link"><i class="icon-logout"></i></a>
</div>
</div>
<div class="gra-mobile-header backoffice">
<div class="mobile-header">
<a class="logo_a" href="/">
<div class="logo"><img src="/img/logo_gra_design_system.png" alt="logo"></div>
</a>
<div class="menus_mobile">
<div class="menuActionsMobile">
<a href="#" class="notificacao-desktop-alink" onclick="alert('É a notificação');">
<i class="icon-bell"></i>
<span class="gra-badge danger">25</span>
</a>
<div class="moreOptions gra-link" title="Ver mais opções">
<i class="icon-settings"></i>
<div class="moreOptionsBox" style="display: none;">
<div class="option markRead"><a href="#">EN</a></div>
<div class="option deleteAll"><a class="gra-link changeTheme">
<span class="gra-tooltip"><span class="tooltiptext bottomCenter">Modo escuro</span><i class="icon icon-moon toggleTheme"></i></span>
</a></div>
</div>
</div>
</div>
<div class="graAvatarWithoutFoto" >
<i class="icon-user graAvatarLogo"></i>
</div>
</div>
<div class="gra-link">
<i class="icon-menu hamburgerPic"></i>
<i class="icon-times menuClosePic"></i>
</div>
</div>
<div class="menu_mobile display-all-menu">
<div class="display-menu">
<ul class="menu-mobile">
<li class="menu-first-level-mobile"><a href="#">opção 1</a></li>
<li class="menu-first-level-mobile withChilds">
<span class="gra-flex-grow">opção 2</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_1">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>opção 2</span>
</li>
<li><a href="#">subopção 1</a></li>
<li class="gra-flex-row withSubmenu">
<span class="gra-flex-grow">subopção 2</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_2">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>subopção 2</span>
</li>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
<li><a href="#">sub-subopção4</a></li>
</ul>
</li>
<li><a href="#">subopção 3</a></li>
<li class="gra-flex-row withSubmenu">
<span class="gra-flex-grow">subopção 4</span>
<i class="icon-chevron-left-small arrow-up"></i>
<ul class="submenu_2">
<li class="back-option">
<i class="icon-chevron-left-small"></i>
<span>subopção 4</span>
</li>
<li><a href="#">sub-subopção1</a></li>
<li><a href="#">sub-subopção2</a></li>
<li><a href="#">sub-subopção3</a></li>
</ul>
</li>
<li><a href="#">subopção 5</a></li>
<li><a href="#">subopção 6</a></li>
<li><a href="#">subopção 7</a></li>
</ul>
</li>
<li class="menu-first-level-mobile"><a href="#">opção 3</a></li>
<li class="menu-first-level-mobile"><a href="#">opção 4</a></li>
<li class="menu-first-level-mobile"><a href="#">opção 5</a></li>
<a class="logout_link gra-link" href="#"><i class="icon-logout"></i>Terminar sessão</a>
</ul>
</div>
</div>
</div>