I am using Materialize CSS framework for CSS. I want to create a navigation bar which the options list should be shown on any devices(mobile, HDMI Screen). Here is the link I have attached for your reference Navigation Bar (Materialize CSS). If I shrink the webpage, the options should be side Triggered when the menu icon is clicked.
I am posting a sample code here, Which I tried
layout = html.Div(id='main-page-content',children=[
#nav wrapper starts here
html.Div(
children=[
#nav bar
html.Nav(
#inside div
html.Div(
children=[
html.A(
'Dashboard Analytics',
className='brand-logo',
href='/'
),
#ul list components
html.Ul(
children=[
html.Li(html.A('Configuration', href='/apps/config')),
html.Li(html.A('Segmentation', href='/apps/segmentation')),
html.Li(html.A('Main Page', href='/apps/users')),
],
id='nav-mobile',
className='right hide-on-med-and-down'
),
],
className='nav-wrapper'
),style={'background-color':'#008EFE'}),
],
className='navbar-fixed'
),
])
#define the external urls
external_css = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css']
for css in external_css:
app.css.append_css({'external_url': css})
external_js = ['https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js']
for js in external_js:
app.scripts.append_script({'external_url': js})
I am new to Dash. So Any help will be greatful. Is there are any features that I can add Materialize Icons in the Dash Application?