Saltar al contenido principal

Agave Header

The header provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

Basic Header​

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

User props​

Add AgaveUser component to endAdornment prop. See the documentation of AgaveUser.

Live editor​

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...