Main nav
The main nav is the primary way users navigate the user interface. It is consistently visible throughout the service.
import { ... } from '@ag.ds-next/react/main-nav';
<Box palette="dark"> <MainNav activePath="#home" items={[ { href: '#home', label: 'Home' }, { href: '#about', label: 'About' }, { href: '#contact', label: 'Contact' }, ]} /> </Box>
The main navigation component is intended to be used as the primary means of navigation around the website. It typically accommodates the top level of the information architecture.
Most sites will require some form of navigation to help users find the information they are looking for. While a horizontal navigation bar is just one option for navigation design, it is one of the most visible and familiar ways of helping users navigate a site.
The main navigation component is designed to work closely with the header component and collapses down to a conventional open/close menu button on smaller devices.
Note: Because the main navigation component is a horizontal list, it does not accommodate a large amount of items. If you need more space, consider another navigation component such as the side nav.
Do
- use to display the top level of the information architecture
- use to enable universal access to system-level tasks and functions – for example, Log in, Account settings, and Messages
- use concise labels
- model your navigation according to most frequently accessed tasks and information
- implement below the Header component.
Don’t
- use hover to expand dropdown lists
- include more than 6 single-word items where possible.
Secondary items
Use the secondaryItems
prop to add navigational items to the right side of the Main nav. Since secondary items are not included in the hamburger/dialog menu on smaller devices, it is important to add a maximum of 2 secondary items.
<Box palette="dark"> <MainNav activePath="#home" items={[ { href: '#home', label: 'Home' }, { href: '#about', label: 'About' }, { href: '#contact', label: 'Contact' }, ]} secondaryItems={[ { href: '#sign-in', label: 'Sign in', endElement: <AvatarIcon color="action" />, }, ]} /> </Box>
Dropdown
Secondary items can also display a Dropdown menu by utilising the dropdown
key.
() => { const [selectedBusiness, setSelectedBusiness] = React.useState('Antfix'); return ( <Box palette="dark"> <MainNav activePath="#home" items={[ { href: '#home', label: 'Home' }, { href: '#about', label: 'About' }, { href: '#contact', label: 'Contact' }, ]} secondaryItems={[ { label: 'Moe Syzlack', beforeElement: ( <Avatar name="Moe Syzlack" tone="action" size="md" /> ), dropdown: ( <DropdownMenuPanel palette="light"> <DropdownMenuGroup label="Businesses"> <DropdownMenuItemRadio checked={selectedBusiness === 'Antfix'} onClick={() => setSelectedBusiness('Antfix')} secondaryText="Sydney" > Antfix </DropdownMenuItemRadio> <DropdownMenuItemRadio checked={selectedBusiness === 'Produce Fresh'} onClick={() => setSelectedBusiness('Produce Fresh')} secondaryText="Brisbane" > Produce Fresh </DropdownMenuItemRadio> <DropdownMenuItemRadio checked={selectedBusiness === 'Organic Co'} onClick={() => setSelectedBusiness('Organic Co')} secondaryText="Canberra" > Organic Co </DropdownMenuItemRadio> <DropdownMenuGroupLink href="#"> View all </DropdownMenuGroupLink> </DropdownMenuGroup> <DropdownMenuGroup label="My account"> <DropdownMenuItemLink href="#messages" icon={EmailIcon}> Messages </DropdownMenuItemLink> <DropdownMenuItem onClick={console.log} icon={ExitIcon}> Sign out </DropdownMenuItem> </DropdownMenuGroup> </DropdownMenuPanel> ), }, ]} /> </Box> ); };
Focus mode
Focus mode refers to temporarily hiding the main navigation of a website or application to reduce distractions and cognitive load.
<Box palette="dark"> <MainNav activePath="#home" items={[ { href: '#home', label: 'Home' }, { href: '#about', label: 'About' }, { href: '#contact', label: 'Contact' }, ]} secondaryItems={[ { href: '#sign-in', label: 'Sign in', endElement: <AvatarIcon color="action" />, }, ]} focusMode={true} /> </Box>
Related components
- App layout – The app layout provides a consistent way for users to navigate around a web application and access their account settings.
- Header – The Header is the masthead of our applications. It incorporates the Department of Agriculture, Fisheries and Forestry Coat of Arms logo and provides a user context on where they are.