Separation of Links in dbc NavbarSimple

Hi,

Does anyone know a convenient way to increase the separation of links in the navbar?

i.e.

make the navigation links a little more spaced out so that they are distinctly different (it looks like separation is maybe ~3 space characters)

Hi @rictuar you could use some padding via the style parameter.

Could you post your code to reproduce your navbar?

hi, sorry i missed this reply

the short version is that adding some CSS (className=‘px-2’)put horizontal spacing that I wanted

html.Div(dbc.NavLink('Upset Plot', href='/upset',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),

for those curious, the entire code was

import dash
from dash import html, dcc
import dash_bootstrap_components as dbc

local_stylesheet = {
    "href": "https://fonts.googleapis.com/css2?"
            "family=Lato:wght@400;700&display=swap",
    "rel": "stylesheet"
}

app = dash.Dash(__name__, use_pages=True, external_stylesheets=[dbc.themes.BOOTSTRAP, local_stylesheet ])

#custom ordering of navbar
my_page_link_list=[
    html.Div(dbc.NavLink('Home', href='/',style = {'color': 'white','font-weight':'bold',"textAlign": "center","vertical-align":"middle"},className='navlink-parker align-middle'),className='px-2'),
    html.Div(dbc.NavLink('Ontological Differential Analysis', href='/hierarchical-differential-analysis',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
    html.Div(dbc.NavLink('Phylo. Trees', href='/tree-generator',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
    html.Div(dbc.NavLink('Differential Analysis', href='/differential-analysis',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
    #default compound for sunburst to make linkin from differential datatables work
    html.Div(dbc.NavLink('Sunburst', href='/sunburst/2',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
    html.Div(dbc.NavLink('Upset Plot', href='/upset',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
    html.Div(dbc.NavLink('BinBrowser', href='/bin-browser/2',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
    html.Div(dbc.NavLink('Tutorials F.A.Q.', href='/tutorials',style = {'color': 'white','font-weight':'bold',"textAlign": "center"}),className='px-2'),
]

app.layout = html.Div([
        dbc.NavbarSimple(
            # dbc.Container(
            children=[
                # html.A(
                #     # Use row and col to control vertical alignment of logo / brand
                #     dbc.Row([
                #         dbc.Col(html.Img(src='https://avatars.githubusercontent.com/u/45467465?s=200&v=4', height="50px")),
                #         dbc.Col(dbc.NavbarBrand(id="header", children="Binvestigate, a FiehnLab Production")),#, className="ms-2")),
                #         ], 
                #         align="center",
                #     ),
                #     href="https://fiehnlab.ucdavis.edu/",
                #     style={"textDecoration": "none"},
                # )
            # the earlier viersion that was alphabetized
            ]+my_page_link_list,
            brand='BinDiscover',
            color='#1A3E68',
            brand_style = {'color': '#FFCD00'},
        ),
        # content of each page
        dash.page_container
    ]
)


if __name__ == "__main__":
    app.run(debug=False, host='0.0.0.0',port=8050)
    #app.run(debug=True)

thanks

2 Likes