Layout Components
Topbar

Topbar

💡
Folder location: src/components/topbar

Examples

import { Topbar, TopbarLanguageSelector, TopbarSocialLinks } from "components/topbar";
// CUSTOM DATA MODEL
import { Topbar } from 'models/Layout.model'
 
// Example 1
export default function Example1({ topbar }:{ topbar: Topbar }) {
  return (
    <Topbar label={topbar.label} title={topbar.title}>
      <Topbar.Right>
        <TopbarLanguageSelector languages={topbar.languageOptions} />
        <TopbarSocialLinks links={topbar.socials} />
      </Topbar.Right>
    </Topbar>
  )
}
 
// Example 2
export default function Example2({ topbar }:{ topbar: Topbar }) {
  return (
    <Topbar label={topbar.label} title={topbar.title} bgColor="red">
      <Topbar.Right>
        <TopbarLanguageSelector languages={topbar.languageOptions} />
        <TopbarSocialLinks links={topbar.socials} />
      </Topbar.Right>
    </Topbar>
  )
}

Views

Example-1

Example-2

Used

Props

NameTypeRequiredDefault
titlestringYes-
labelstringYes-
childrenReactNodeYes-
bgColorstringOptional-