Topbar
Layout Component1import { Topbar } from 'maker-ui'
The Topbar component sits above your site header and gives you a space to add supplementary content. Use it for recent announcements, new post links, social media icons, etc.
This component renders an inner container so you can use both the _css
and css
props for responsive styling.
The Topbar is a static layout element that cannot be dismissed. If you want users to be able to close or hide the container, use an Announcement instead.
Props#
Prop | Description |
---|---|
css | Type object css prop will be applied to the Topbar's inner content container. |
_css | Type object _css prop will be applied to the root Topbar element. |
background | Type string | string[] --color-bg_topbar background value that you can set in Maker UI options. |
maxWidth | Type string | number | (string | number)[] topbar.maxWidth that you can set in Maker UI options. |
scrollOverflow | Type boolean Defaultfalse |
sticky | Type boolean topbar.sticky from Maker UI options. |
stickyOnMobile | Type boolean topbar.stickyOnMobile from Maker UI options. |
The override props are designed for conditional use cases or runtime logic. Whenever possible, use Maker UI options instead.
Maker UI Options#
Your options configuration has a topbar
object with the following properties:
Option | Description |
---|---|
breakpoint | Type string | number options.breakpoints . This setting is only helpful if topbar.hideOnMobile is set to true. Default0 The first index of your global breakpoints array |
errorBoundary | Type boolean options.errors . Defaultfalse |
hideOnMobile | Type boolean Defaultfalse |
maxWidth | Type string | number | (string | number)[] Default1260 |
sticky | Type boolean Defaultfalse |
stickyOnMobile | Type boolean Defaultfalse |
Usage#
Add Topbar
to the beginning of your layout tree, right before the header:
1import {2 Layout,3 Topbar,4 Header,5 Content,6 Main,7 Footer8} from 'maker-ui'910// This example omits key props like menus, options, etc.1112export const MyLayout = ({ children }) => (13 <Layout>14 <Topbar>Your custom content<Topbar>15 <Header />16 <Content>17 <Main>{children}</Main>18 </Content>19 <Footer />20 </Layout>21)
Contents