Nav Bar

Creating a Nav Bar

To supply the nav bar with its contents, an options object is passed as a prop to the nav bar. This object can be created in the script section of the .svelte file or imported in from another location. The options object has 6 properties.

Required Props

• contentInfo (array): This will set the main content in your nav bar. This array contains a series of objects that should be defined as follows:
• options (array): The array contains a series of strings, and the order of the strings will determine the order they appear in the nav bar section. This will define the text labeling a given nav landmark.
• links (array): The array contains a series of strings, and the order of the strings should mimic that of the options array above. These strings will set the href attribute of the anchor tag that enable navigation.
• subheading (string): This will set the subheading for a section of the nav bar.

Optional Props

• id (string): This will be the id attribute you reference for styling inside your navbar component.
• header (string): This will set the heading for the entire nav bar.
• imgSrc (string): This will set the file path for an image you want to include at the top of the menu.
• imgClass (string): This will set the class for the image included with the imgSrc attribute.
• imgAlt (string): This will set the alternate text for the image included with the imgSrc attribute.

Example Options Object:

const navOptions = {}
  contentInfo: [
	{
	  subheading: '',
	  options: ['Home', 'Github'],
	  links: ['/', 'https://github.com/oslabs-beta/svve11']
	},
	{
	  subheading: 'Components',
	  options: ['Accordion','Button','Checkbox', ...],
	  links: ['/pages/accordion','/pages/button','/pages/checkbox',...]
	},
	{
	  subheading: '',
	  options: ['About the team'],
	  links: ['/about']
	}
  ],
	id: 'nav-bar',
  imgSrc: logo,
  imgClass: 'svvell-logo',
  imgAlt: 'svve11'
};
			

Instantiating a nav bar

<NavBar options={navOptions} />
	

As an example, the nav bar for this webpage is made using this component and the options object above was used to create it.