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
![](/topbar/topbar-1.png)
Example-2
![](/topbar/topbar-2.png)
Used
Props
Name | Type | Required | Default |
---|---|---|---|
title | string | Yes | - |
label | string | Yes | - |
children | ReactNode | Yes | - |
bgColor | string | Optional | - |