Topbar

Layout Component
1import { 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#

PropDescription
css
Type
object
Styles from the css prop will be applied to the Topbar's inner content container.
_css
Type
object
Styles from the _css prop will be applied to the root Topbar element.
background
Type
string | string[]
Overrides the Topbar's default --color-bg_topbar background value that you can set in Maker UI options.
maxWidth
Type
string | number | (string | number)[]
Overrides topbar.maxWidth that you can set in Maker UI options.
scrollOverflow
Type
boolean
When true, content overflow will scroll horizontally instead of wrapping to a new line.
Defaultfalse
sticky
Type
boolean
Overrides topbar.sticky from Maker UI options.
stickyOnMobile
Type
boolean
Overrides 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:

OptionDescription
breakpoint
Type
string | number
A specific breakpoint that determines when the Topbar is visible. You may also use an index to access a breakpoint from 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
When true, this will wrap the inner contents of the Topbar in an Error Boundary that you can customize with options.errors.
Defaultfalse
hideOnMobile
Type
boolean
A boolean that determines if the Topbar is visible on mobile.
Defaultfalse
maxWidth
Type
string | number | (string | number)[]
The max-width of the Topbar's content container. Can be a responsive array.
Default1260
sticky
Type
boolean
A boolean that determines if the Topbar sticks to the top of the viewport while scrolling.
Defaultfalse
stickyOnMobile
Type
boolean
A boolean that determines if the Topbar is visible on mobile.
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  Footer
8} from 'maker-ui'
9

10// This example omits key props like menus, options, etc.
11

12export 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