import Navigation from '@politico/interactive-style/src/components/Navigation';// orimport { Navigation } from '@politico/interactive-style';
| Name | Type | Default | Description |
|---|---|---|---|
| site | '''magazine' | '' | The site this page belongs to (blank for the core site) |
| theme | 'light''dark' | White background or black background (the default depends on the site chosen) |
| Name | Global Class | Description |
|---|---|---|
| root | PibNavigation-root | Styles applied to root element |
| container | PibNavigation-container | Styles applied to container element |
| branding | PibNavigation-branding | Styles applied to the name of the site |
| home | PibNavigation-home | Styles applied to the home link |
| links | PibNavigation-links | Styles applied to the container of the links to other properties |
If you're working on a Magazine piece set the "site" to "magazine".
You can switch between "light" and "dark" themes using the theme prop. Note that the default theme for the base nav is "light", but the default theme for the Magazine nav is "dark". Try changing the site to "magazine" and the "theme" to "light".