<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/shiny-application-layouts-exercises-part-4/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.r-exercises.com/2017/05/06/shiny-application-layouts-exercises-part-4/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-4"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><a target="_blank" rel="nofollow" href="https://i0.wp.com/www.r-exercises.com/wp-content/uploads/2017/04/forecasting-part-5-1.png"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-5535" src="https://i1.wp.com/www.r-exercises.com/wp-content/uploads/2017/04/forecasting-part-5-1-150x150.png?resize=150%2C150" data-recalc-dims="1"></a></p>
<p><strong>Shiny Application Layouts – Navbar Page Features</strong></p>
<p>In the fourth part of our series we will see some of the most important features that a Navbar page provides in order to enhance the appearance of our shiny application.</p>
<p>We will use the “Cars” app which we built in Shiny Application Layouts-Navbar Page.</p>
<p>This part can be useful for you in two ways. </p>
<p>First of all, you can see different ways to enhance the appearance and the utility of your shiny app. </p>
<p>Secondly you can make a revision on what you learnt in <a target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">“Building Shiny App”</a> series as we will build basic shiny staff in order to present it in the proper way.</p>
<p>Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/05/06/shiny-application-layouts-solutions-part-4/">here</a>.</p>
<p><strong>Navbar Arguments</strong></p>
<p>This is a basic <code>navbarPage()</code> function with a title:<br>
#ui.R<br>
<code>navbarPage(&quot;Cars&quot;)</code></p>
<p>You can use <code>selected</code> to select the value of the tab that should be selected by default. If <code>NULL</code>, the first tab will be selected.<br>
#ui.R<br>
<code>navbarPage(&quot;Cars&quot;,selected=&quot;tab&quot;).</code></p>
<p><strong>Exercise 1</strong></p>
<p>Change the <code>title</code> to your navigation bar to “Cars App”. Then name it “Cars” again.</p>
<p><strong>Exercise 2</strong></p>
<p>Add <code>value</code> to all of your <code>tabPanel</code>.</p>
<div>
<aside><img src="http://www.r-exercises.com/2017/05/06/shiny-application-layouts-exercises-part-4/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-4"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a target="_blank" rel="nofollow" href="http://www.r-exercises.com/product/r-shiny-interactive-web-apps/">R Shiny Interactive Web Apps – Next Level Data Visualization</a>. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).</div>
</div>
<p><strong>Exercise 3</strong></p>
<p>Select the <code>tabPanel</code> of the “Data Table” as default. Then deactivate it.</p>
<p>With <code>position</code> you can choose whether the <code>navbar</code> should be displayed at the top of the page with normal scrolling behavior (“static-top”), pinned at the top (“fixed-top”), or pinned at the bottom (“fixed-bottom”).<br>
#ui.R<br>
<code>navbarPage(&quot;Cars&quot;,selected=&quot;tab&quot;,position=&quot;fixed-bottom&quot;)</code></p>
<p><strong>Exercise 4</strong></p>
<p>Set the navbar <code>position</code> to “fixed-bottom”. Then deactivate it.</p>
<p>With <code>inverse</code> set to <code>TRUE</code> you will take a black background and light text for the navigation bar.<br>
#ui.R<br>
<code>navbarPage(&quot;Cars&quot;,selected=&quot;tab&quot;,position=&quot;fixed-bottom&quot;,inverse= T)</code></p>
<p><strong>Exercise 5</strong></p>
<p>Change the color of the navigation bar to black.</p>
<p>If you set <code>collapsible</code> to <code>TRUE</code> the navigation elements are collapsed into a menu when the width of the browser is less than 940 pixels.<br>
#ui.R<br>
<code>navbarPage(&quot;Cars&quot;,selected=&quot;tab&quot;,position=&quot;fixed-bottom&quot;,inverse= T,collapsible =T)<br>
</code></p>
<p><strong>Exercise 6</strong></p>
<p>Collapse your navigation elements.</p>
<p>You can set <code>fluid</code> to <code>TRUE</code> to use a fluid layout.<br>
#ui.R<br>
<code>navbarPage(&quot;Cars&quot;,selected=&quot;tab&quot;,position=&quot;fixed-bottom&quot;,inverse= T,collapsible =T,fluid =T)</code></p>
<p><strong>Exercise 7</strong></p>
<p>Set <code>fluid</code> to <code>FALSE</code>.</p>
<p>You can also use <code>headerPanel()</code> to create an application title.Look at the example:<br>
#ui.R<br>
<code>tabPanel(&quot;Plot&quot;, value = &quot;pl&quot;,headerPanel(&quot;PLOT&quot;),<br>
                            sidebarLayout(<br>
                              sidebarPanel(<br>
                                radioButtons(&quot;plote&quot;, &quot;Plot&quot;,<br>
                                             c(&quot;Scatter&quot;=&quot;p&quot;, &quot;Line&quot;=&quot;l&quot;)<br>
                                )<br>
                              ),<br>
                              mainPanel(<br>
                                plotOutput(&quot;plot&quot;)<br>
                              )<br>
                            ))</code></p>
<p><strong>Exercise 8</strong></p>
<p>Create four <code>headerPanel()</code>. One for every <code>tabPanel</code> and name them as the respective <code>tabPanel</code>.</p>
<p>You can use <code>position</code> in your <code>sidebarLayout</code> to place the sidebar from left to right. Look at the example:<br>
#ui.R<br>
<code>sidebarLayout(position=&quot;right&quot;,<br>
                              sidebarPanel(<br>
                                radioButtons(&quot;plote&quot;, &quot;Plot&quot;,<br>
                                             c(&quot;Scatter&quot;=&quot;p&quot;, &quot;Line&quot;=&quot;l&quot;)<br>
                                )<br>
                              ),<br>
                              mainPanel(<br>
                                plotOutput(&quot;plot&quot;)<br>
                              )<br>
                            )</code></p>
<p><strong>Exercise 9</strong></p>
<p>Move your sidebar to the right.</p>
<p>You can also name your <code>navbarMenu</code> like this:<br>
#ui.R<br>
<code>navbarMenu(&quot;Others&quot;,&quot;TITLE&quot;,</code></p>
<p><strong>Exercise 10</strong></p>
<p>Giva a title to your <code>navbarMenu</code>.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a title="Building Shiny App exercises part 4" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/">Building Shiny App exercises part 4 </a></li>
<li><a title="Shiny Application Layouts exercises part 3" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/04/30/shiny-application-layouts-exercises-part-3/">Shiny Application Layouts exercises part 3 </a></li>
<li><a title="Building Shiny App exercises part 1" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">Building Shiny App exercises part 1 </a></li>
<li><a target="_blank" rel="nofollow" href="http://www.r-exercises.com/start-here-to-learn-r/">Explore all our (>1000) R exercises</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.r-exercises.com/r-courses/">Find an R course using our R Course Finder</a> directory</li>
</ol>
</div>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://www.r-exercises.com/2017/05/06/shiny-application-layouts-exercises-part-4/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-4"> R-exercises</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/H6uSQ6zA6lY"></a></div>