Skip to main content
The Divider component creates a horizontal line to visually separate content. It’s a simple but effective way to organize information and improve visual hierarchy.

​
Installation

npm install @naturacosmeticos/natds-web

​
Import

import { Divider } from '@naturacosmeticos/natds-web';

​
Usage

​
Basic Divider

Create a simple full-width divider: 
import { Divider, Typography } from '@naturacosmeticos/natds-web';

function BasicDivider() {
  return (
    <div>
      <Typography>Content above</Typography>
      <Divider />
      <Typography>Content below</Typography>
    </div>
  );
}

​
Inset Divider

Create a divider with left indentation: 
import { Divider, List, ListItem, ListItemText } from '@naturacosmeticos/natds-web';

function InsetDivider() {
  return (
    <List>
      <ListItem>
        <ListItemText primary="Item 1" />
      </ListItem>
      <Divider variant="inset" />
      <ListItem>
        <ListItemText primary="Item 2" />
      </ListItem>
    </List>
  );
}

​
Middle Divider

Create a divider with margin on both sides: 
import { Divider, Typography } from '@naturacosmeticos/natds-web';

function MiddleDivider() {
  return (
    <div>
      <Typography>Section 1</Typography>
      <Divider variant="middle" />
      <Typography>Section 2</Typography>
    </div>
  );
}

​
Props

​
variant
'fullWidth' | 'inset' | 'middle'
default:"'fullWidth'"
The variant to use.
  • fullWidth: Spans the entire width of its container
  • inset: Has left indentation (72px), typically used in lists
  • middle: Has margin on both left and right sides (16px)

​
Variants

​
Full Width (Default)

The divider spans the complete width of its container: 
import { Divider, Container } from '@naturacosmeticos/natds-web';

function FullWidthExample() {
  return (
    <Container>
      <p>This divider spans the full width</p>
      <Divider variant="fullWidth" />
      <p>Content continues below</p>
    </Container>
  );
}

​
Inset

Commonly used in lists with icons or avatars: 
import { 
  Divider, 
  List, 
  ListItem, 
  ListItemAvatar, 
  ListItemText,
  Avatar 
} from '@naturacosmeticos/natds-web';

function InsetList() {
  return (
    <List>
      <ListItem>
        <ListItemAvatar>
          <Avatar>A</Avatar>
        </ListItemAvatar>
        <ListItemText primary="Alice" secondary="[email protected]" />
      </ListItem>
      <Divider variant="inset" />
      <ListItem>
        <ListItemAvatar>
          <Avatar>B</Avatar>
        </ListItemAvatar>
        <ListItemText primary="Bob" secondary="[email protected]" />
      </ListItem>
    </List>
  );
}

​
Middle

Useful for creating visual breaks with breathing room: 
import { Divider, Card, CardContent, Typography } from '@naturacosmeticos/natds-web';

function MiddleCard() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5">Section One</Typography>
        <Typography>Content for section one</Typography>
        <Divider variant="middle" />
        <Typography variant="h5">Section Two</Typography>
        <Typography>Content for section two</Typography>
      </CardContent>
    </Card>
  );
}

​
Examples

​
List with Dividers

Separate list items with dividers: 
import { 
  Divider, 
  List, 
  ListItem, 
  ListItemText 
} from '@naturacosmeticos/natds-web';

function ItemList() {
  const items = ['Apples', 'Bananas', 'Oranges', 'Grapes'];
  
  return (
    <List>
      {items.map((item, index) => (
        <div key={item}>
          <ListItem>
            <ListItemText primary={item} />
          </ListItem>
          {index < items.length - 1 && <Divider />}
        </div>
      ))}
    </List>
  );
}

​
Content Sections

Divide article content into sections: 
import { Divider, Typography, Container, Spacing } from '@naturacosmeticos/natds-web';

function Article() {
  return (
    <Container>
      <Spacing py={3}>
        <Typography variant="h1">Article Title</Typography>
        <Spacing my={2}>
          <Typography>Introduction paragraph...</Typography>
        </Spacing>
      </Spacing>
      
      <Divider />
      
      <Spacing py={3}>
        <Typography variant="h2">First Section</Typography>
        <Spacing mt={2}>
          <Typography>Section content...</Typography>
        </Spacing>
      </Spacing>
      
      <Divider />
      
      <Spacing py={3}>
        <Typography variant="h2">Second Section</Typography>
        <Spacing mt={2}>
          <Typography>Section content...</Typography>
        </Spacing>
      </Spacing>
    </Container>
  );
}

​
Menu Dividers

Separate menu sections: 
import { Menu, MenuItem, Divider } from '@naturacosmeticos/natds-web';

function DropdownMenu({ anchorEl, open, onClose }) {
  return (
    <Menu anchorEl={anchorEl} open={open} onClose={onClose}>
      <MenuItem onClick={onClose}>Profile</MenuItem>
      <MenuItem onClick={onClose}>My Account</MenuItem>
      <Divider />
      <MenuItem onClick={onClose}>Settings</MenuItem>
      <Divider />
      <MenuItem onClick={onClose}>Logout</MenuItem>
    </Menu>
  );
}

​
Card Sections

Divide card content: 
import { 
  Card, 
  CardContent, 
  CardActions,
  Button,
  Divider,
  Typography 
} from '@naturacosmeticos/natds-web';

function ProductCard() {
  return (
    <Card>
      <CardContent>
        <Typography variant="h5">Product Name</Typography>
        <Typography color="textSecondary">$99.99</Typography>
        <Divider variant="middle" style={{ margin: '16px 0' }} />
        <Typography>Product description goes here...</Typography>
      </CardContent>
      <Divider />
      <CardActions>
        <Button size="small">Add to Cart</Button>
        <Button size="small">View Details</Button>
      </CardActions>
    </Card>
  );
}

​
Vertical Spacing

Combine with spacing for visual rhythm: 
import { Divider, Typography, Spacing } from '@naturacosmeticos/natds-web';

function SpacedContent() {
  return (
    <div>
      <Typography variant="h3">Section Title</Typography>
      <Spacing my={2}>
        <Divider />
      </Spacing>
      <Typography>Content after divider with proper spacing</Typography>
    </div>
  );
}

​
Best Practices

Use dividers to separate content groups logically
Choose the appropriate variant based on context (inset for lists, middle for cards)
Maintain consistent divider usage throughout your application
Combine with spacing components for proper visual rhythm
Don’t overuse dividers - too many can create visual clutter
Avoid using dividers when whitespace alone would suffice
Don’t use dividers as the only means of organization - combine with headings and spacing

​
Styling

The Divider inherits the theme’s divider color. To customize: 
import { Divider } from '@naturacosmeticos/natds-web';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles({
  customDivider: {
    backgroundColor: 'rgba(0, 0, 0, 0.2)',
    height: 2
  }
});

function CustomDivider() {
  const classes = useStyles();
  return <Divider className={classes.customDivider} />;
}

​
Accessibility

The Divider component:
  • Renders as an <hr> element (horizontal rule) for semantic HTML
  • Is recognized by screen readers as a content separator
  • Uses ARIA role=“separator” implicitly
  • Has no interactive functionality, so requires no keyboard handling
  • Helps organize content for assistive technology users

​
Screen Reader Considerations

// For decorative dividers that should be ignored by screen readers:
<Divider role="presentation" />

// For dividers that separate important sections (default behavior):
<Divider /> {/* Already has proper semantics */}

​
When to Use

Use CaseExample
List itemsSeparating items in a navigation menu or settings list
Content sectionsDividing article sections or form groups
Card contentSeparating header, body, and footer in cards
Menu sectionsGrouping related menu items
Dialog sectionsSeparating content from actions

​
When Not to Use

ScenarioAlternative
Between form fieldsUse spacing/margins instead
Every paragraphUse whitespace and typography
In dense data tablesUse subtle borders or alternating row colors
For decorative purposesConsider other design elements

​
Related Components

  • Spacing - For controlling margins and padding
  • List - For displaying lists with optional dividers
  • Card - For grouped content that often uses dividers
  • Menu - For dropdown menus with section dividers

​
Technical Details

The Divider component:
  • Renders as an <hr> HTML element
  • Uses CSS borders for the visual line
  • Inherits color from the theme’s divider color
  • Has a default height of 1px
  • Supports Material-UI’s styling system
  • Is a forwarded ref component supporting refs

​
Browser Support

The Divider component works in all modern browsers:
  • Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile browsers (iOS Safari, Chrome Mobile)
  • No special polyfills required

Build docs developers (and LLMs) love

Get started for freeTalk to us