To answer this question can be a little complicated and difficult to understand if you're new to the website design process, so we'll explain this a few ways.
In short, a site map shows where content lives - typically in an outline form where you can have pages in sections. There's no duplicate content (the same content does not appear in more than one place). The website navigation shows how the menus/navigation on the website will work and there can be more than one link to the same page.
Here's a simple site map example:
Pretty simple so far, right? There are 11 pages listed here, assuming that the main "Products" page is actually a page and the main "Services" page is as well, which is typically the case and better for SEO.
Now, let's say "Service 1" is something that most people coming to the website will be looking for. It's really popular. You may want to make it a main item in the navigation, like this:
You can see that "Service 1" is duplicated in this view of the navigation. There are two ways to get to that page. Each indented list here represents a drop-down in the navigation (it can but doesn't have to actually - if you don't want drop-downs, that's fine but they are recommended).
The "Service 1" page still lives as the first item under "Services" (per the site map) but we have made another link to it. We could have put that link anywhere in the navigation but since it's popular, we put it at the top.
Across the actual web page, it would look like this (since horizontal navigation is the trend now and good for usability across devices):
Home | About Us | Service 1 | Products | Services | FAQs | Contact Us
The site map and website navigation tend to be similar or, very often, the same.
Again, for website construction purposes, we need to know where pages will live. It needs a place. Google and other search engines also need to understand the structure of a website and when you have good structure, that contributes to good SEO. The site map shows the structure and where every page lives.
The website navigation explains how to get to each page / how your website visitors will navigate your website.
You can still have buttons to get people to places as well. Those buttons will appear in the wireframes when we do design for you and they are just links to a page, which (not to beat a dead horse) live in the site map.
