Highlight active tabs

Question

Wanted to check if we can highlight the active tabs . i mean when the user is in one tab ("agh"), that tab should be underlined. Similarly for other tab as well. Reprex below

app.R

library(shiny)

shinyApp(
    navbarPage(
        tags$head(
            tags$style(
                HTML(".tabbable > .nav > li[class=active] > a {text-decoration: underline}")
            )
        ),
        tabPanel("Tab1"),
        tabPanel("Tab2"),
        tabsetPanel(
            tabPanel("agh",
                     numericInput("n", "Number to add", 5),
                     actionButton("add", "Add"),
                     verbatimTextOutput("sum", placeholder = TRUE)
            ),
            tabPanel("dfd")
        )
    ),
    function(input, output, session) {
        nums <- numeric()

        c_sum <- eventReactive(input$add, {
            nums <<- c(nums, input$n)
            sum(nums)
        })

        output$sum <- renderText({
            c_sum()
        })

    }
)

add shiny as a tag. Also, by highlight/underline you are referring to the header of the tab? So from "agh" to "__*agh*__" ? — J. Doe., Mar 03 '20 at 14:05
Yes you are right. It should be ahg (underlined). Is it possible? — imran p, Mar 03 '20 at 14:07
It is. You can use HTML/CSS to change all formatting in the app and each tab. I paste an example already answered : https://stackoverflow.com/questions/35025145/background-color-of-tabs-in-shiny-tabpanel — J. Doe., Mar 03 '20 at 14:08

score 0 · Answer 1 · answered Mar 03 '20 at 14:49

0

library(shiny)

shinyApp(
  fluidPage(
    tags$head(
      tags$style(
        HTML(".tabbable > .nav > li[class=active] > a {text-decoration: underline}")
      )
    ),
    br(),
    tabsetPanel(
      tabPanel("agh",
               numericInput("n", "Number to add", 5),
               actionButton("add", "Add"),
               verbatimTextOutput("sum", placeholder = TRUE)
      ),
      tabPanel("dfd")
    )
  ),
  function(input, output, session) {
    nums <- numeric()

    c_sum <- eventReactive(input$add, {
      nums <<- c(nums, input$n)
      sum(nums)
    })

    output$sum <- renderText({
      c_sum()
    })

  }
)

answered Mar 03 '20 at 14:49

Stéphane Laurent

75,186
15
119
225

Thanks it worked. but actually i replicated the same to navbarpage. it did not work. I have edited my question for you. can you please help me. So for tab1 and tab2 can we apply the same logic – imran p Mar 04 '20 at 07:58
@imranp Could you try `HTML(".nav > li[class=active] > a {text-decoration: underline}")`. – Stéphane Laurent Mar 04 '20 at 11:31
Perfect thanks a lot. Can u please explain me. What is the difference? Why earlier code was not working – imran p Mar 04 '20 at 11:40

Highlight active tabs

1 Answers1