Overview
The AppBar component provides a container for displaying branding, navigation items, and actions at the top of your application. By default, it does not include icons or additional elements - you are free to compose it with other components like Toolbar, IconButton, and Typography.
Installation
npm install @naturacosmeticos/natds-web
Import
import { AppBar } from '@naturacosmeticos/natds-web';
Props
color
'default' | 'inherit' | 'primary' | 'secondary' | 'transparent'
The color of the component. Defaults to 'primary'.
The elevation (shadow depth) of the AppBar. Defaults to 2. Set to 0 for no elevation.
position
'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'
The positioning type. Defaults to 'fixed'.
The content of the AppBar, typically a Toolbar component with navigation items.
Override or extend the styles applied to the component.
Usage
Basic AppBar
import { AppBar, Toolbar, Typography } from '@naturacosmeticos/natds-web';
function BasicAppBar() {
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">My Application</Typography>
</Toolbar>
</AppBar>
);
}
With Primary Color
import { AppBar, Toolbar, Typography } from '@naturacosmeticos/natds-web';
function PrimaryAppBar() {
return (
<AppBar color="primary" position="static">
<Toolbar>
<Typography variant="h6">Primary Color</Typography>
</Toolbar>
</AppBar>
);
}
Without Elevation
Sometimes you may need an AppBar without elevation, which is common when creating a header for a website.
import { AppBar, Toolbar, Typography } from '@naturacosmeticos/natds-web';
function FlatAppBar() {
return (
<AppBar elevation={0} position="static">
<Toolbar>
<Typography variant="h6">No Elevation</Typography>
</Toolbar>
</AppBar>
);
}
With Icon Buttons
import {
AppBar,
Toolbar,
Typography,
IconButton
} from '@naturacosmeticos/natds-web';
function AppBarWithIcons() {
return (
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<Icon name="outlined-navigation-menu" />
</IconButton>
<Typography variant="h6" style={{ flexGrow: 1 }}>
My App
</Typography>
<IconButton color="inherit" aria-label="search">
<Icon name="outlined-action-search" />
</IconButton>
</Toolbar>
</AppBar>
);
}
With Tabs
import {
AppBar,
Toolbar,
Typography,
TabContainer,
TabItem
} from '@naturacosmeticos/natds-web';
import { useState } from 'react';
function AppBarWithTabs() {
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<AppBar position="static" color="default">
<Toolbar>
<Typography variant="h6">Navigation</Typography>
</Toolbar>
<TabContainer value={value} onChange={handleChange}>
<TabItem label="Home" />
<TabItem label="Products" />
<TabItem label="About" />
</TabContainer>
</AppBar>
);
}
With Prominent Toolbar
When Toolbar is used with the prominent variant, AppBarHighlight component will be automatically positioned.
import {
AppBar,
Toolbar,
AppBarHighlight,
Typography
} from '@naturacosmeticos/natds-web';
function ProminentAppBar() {
return (
<AppBar position="static">
<Toolbar variant="prominent">
<AppBarHighlight>
<Typography variant="h6">AppBar text</Typography>
</AppBarHighlight>
</Toolbar>
</AppBar>
);
}
Composition
AppBar works well with:
- Toolbar: Container for navigation items and actions
- AppBarHighlight: Highlight content within the AppBar
- IconButton: Action buttons in the navigation
- Typography: Text content and titles
- TabContainer/TabItem: Tabbed navigation
Accessibility
- Use semantic HTML by wrapping in a
<header> tag when appropriate
- Include
aria-label on IconButtons for screen readers
- Ensure adequate color contrast between text and background
- Test keyboard navigation for all interactive elements
Related Components
Material-UI Reference
This component is based on Material-UI’s AppBar. For advanced usage, see the Material-UI AppBar documentation.
