Agriculture Design System
Beta
Design System for the Export Service

Main nav

The main nav is the primary way users navigate the user interface. It is consistently visible throughout the service.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/main-nav';
Open in Playroom, opens in a new tab
<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 8 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.

Open in Playroom, opens in a new tab
<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>

Secondary items can also display a Dropdown menu by utilising the dropdown key.

Open in Playroom, opens in a new tab
() => {
	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.

Open in Playroom, opens in a new tab
<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>
  • 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.
Edit this page