Hi @Sumaira ,
What you referring to is called breadcrumbs. In default page templates from Microsoft they are present. If you want to create your own you will need liquid code like this:
<ul class="breadcrumb">
{% for crumb in page.breadcrumbs -%}
<li>
<a href={{ crumb.url }}>{{ crumb.title }}</a>
</li>
{% endfor -%}
<li class="active">{{ page.title }}</li>
</ul>
Explanation: in the liquid objects that are available to us there is an object called page that has a property called breadcrumbs. It returns the breadcrumb site map node objects for the page, starting from the site map root node and ending at parent. You can find this example and more information about page object here.
