Saltar al contenido principal

Header

Los headers dan contexto a la pantalla que el usuario está viendo. Se usan para branding, títulos, navegación y acciones.

Header básico​

My awesome project
pages/index.tsx
export default function Header() {
  return <AgaveHeader title="My awesome project" />;
}

Header con logo completo (logotipo)​

My awesome project
pages/index.tsx
export default function Header() {
  return <AgaveHeader title="My awesome project" fullLogo />;
}

Header con logo pequeño (isotipo)​

My awesome project
pages/index.tsx
export default function Header() {
  return <AgaveHeader title="My awesome project" smallLogo />;
}
My awesome project
pages/index.tsx
export default function Header() {
  return (
    <AgaveHeader
      title="My awesome project"
      logoLink="https://github.com/99minutos/agave-material"
      smallLogo
    />
  );
}

Header con usuario que ha iniciado sesión​

Par añadir el nombre y algunas opciones del usuario que ha iniciado sesión, usa el componente AgaveUser com la propiedad endAdornment de AgaveHeader. Visita la documentación de AgaveUser.

Prueba el componente​

https://station-management.vercel.app/

Editor en vivo
<div style={{ position: 'relative', height: '50px' }}>
  <AgaveHeader
    logoLink="https://github.com/99minutos/agave-material"
    title="Agave Material Library"
    appBarProps={{ position: 'absolute' }}
  />
</div>

Resultado
Loading...