Use lightning-navigation within LWR sites

hello everyone welcome to a new series for developers who are interested in developing with experience cloud and lightning web runtime sites in our sixth episode we will look at how to use different navigation techniques like the anchor tag or the navigation service when building a website you often have the need to navigate your users around be it to direct them to another page on your site another experience cloud site or an external web page and you may want to pass parameters for those navigation requests to provide a good user experience now there are two options

on how you can do this within lwr sites using the standard anchor tag as you know it from regular web development or the lightning navigation service which is an out of the box module to support user navigation within experience cloud let's start with the lightning navigation service first what it is and why you should use it the lightning navigation service is an abstraction layer it ensures that urls will always be consistently constructed and called we look here at the basic setup for using the service at the top we import the navigation mixing function from the

lighting navigation module to be able to use a function we have to apply the function to our component's base class and then we can use the navigate method of the mixin to navigate another page the object that is passed to the navigate method is called a page reference which we will explore later more in detail so why is it important to use the lightning navigation service at all imagine we may change in the future the url format for let's say opening the homepage of your site or we extend existing navigation capabilities if you hard code

everything within an anchor tag you may have to revisit your code base by using the navigation service we ensure that everything will continue to work so let's see it in action we are here back in the az insurance sample application at the top we have a menu entry for our cms power block for the simplicity of the demo we have a single blog post in our blog post list and when we click on it it navigates us to the blog detail page this is because we provide an agnostic page for our blog details and use

data passed by the navigation service to determine which block entry we want to display now let's check out how we did that here we have a side by side for our cms block list component all blog posts that have been queried from cms are stored in the blocks property and for every block item we construct a new div where we store the content id as the blog post as a data id attribute now when someone clicks on that div we execute the navigate function of the navigation mixer as parameter we pass a page reference object

of type standard web page this page reference takes exactly one attribute which is the target url and in our case it is a constructed url for our agnostic page the value of the data id attribute is then used to specify the block id query parameter our next step is then to use the navigation service again to actually fetch the query parameter on our block detail page this is where we can use page references again to be specific the current page reference which gives us a description of the current page we can access the page's query

parameters then using the page references state property within their property query parameters are stored as key value pairs like our block id so far you learned how to use the navigation service using the standard web page type for experience cloud sites you can also use additional types first the com login page type this once runs a login related action like login or logout and second the common named page type which enables you to navigate to a specific page based on its api name now you may also be familiar with additional page types that can be

used in experience cloud but they don't work yet within the lwr template one of these limitations is for example navigating to record pages so you will have to build that your own check out the description which contains links to the relevant document to learn more about that now thanks so much for viewing feel free to like the video and see you next time when we talk about how to build custom record pages and also how to navigate to them never miss an episode by subscribing and turning on your notifications