Laravel Spark - Adding a navigation

Laravel Spark is out and it is really exciting to work with. But it is different from building an application from scratch. It provides a lot of great features but this also means quite some new stuff to learn. Today I want to show you how to add a simple navigation.

Welcome Spark to the Laravel family

Two weeks ago Taylor Otwell released Laravel Spark. It was built to help you create SaaS applications. Taylor describes it like that:

Spark provides the perfect starting point for your next big idea. Forget all the boilerplate and focus on what matters: your application. (Taylor Otwell)

So everything from authentication, subscriptions, teams, invoices and more is already built in and you are ready to start with your idea.

Note: Check out the official website for more information: https://spark.laravel.com

Spark and me

Since day one I am playing around with Spark and everyday I learn something new about it. I am also working on my first SaaS application with Spark and I want to share some of my early experiences here with you.

Spark navigation

Today we start with a simple task: adding a navigation. After logging into the application you will find yourself at the home page. In many cases you will want to use the already given top bar with your profile image and the backend menu. That’s what we will do too because Taylor did great work here. Alright, so where can we add the navigation?

The partial file is called user-left.blade.php but be careful, you will find several of these files =) We are only interested in this one: resources/views/vendor/spark/nav/user-left.blade.php.

This file is empty. Let’s put in two links for our navigation.

<!-- Left Side Of Navbar -->
<li>
    <a href="/contact">Contact</a>
</li>
<li>
    <a href="/about">About</a>
</li>

This is a screenshot of the bar before our changes.

Laravel Spark top bar without nav

And another one after the changes.

Laravel Spark top bar with the new navigation

Note: When you upgrade your application, any views that have been modified will not be updated. Instead, you will simply be notified that these views were skipped.

Conclusion

This was it. Nothing special here, but still a good little tip for you to start. As you have seen the styling is already taken care of. Taylor uses Twitter Bootstrap for the generated views and this is why it is already included. If you do not want to use it just use you own styles. This is totally up to you. See you next time.

comments powered by Disqus