"button": {
"name": "Button",
"path": "/documentation/elements/button"
+ },
+ "components": {
+ "name": "Components",
+ "path": "/documentation/components"
+ },
+ "components-breadcrumb": {
+ "name": "Breadcrumb",
+ "path": "/documentation/components/breadcrumb"
+ },
+ "components-card": {
+ "name": "Card",
+ "path": "/documentation/components/card"
+ },
+ "components-dropdown": {
+ "name": "Dropdown",
+ "path": "/documentation/components/dropdown"
+ },
+ "components-menu": {
+ "name": "Menu",
+ "path": "/documentation/components/menu"
+ },
+ "components-message": {
+ "name": "Message",
+ "path": "/documentation/components/message"
+ },
+ "components-modal": {
+ "name": "Modal",
+ "path": "/documentation/components/modal"
+ },
+ "components-navbar": {
+ "name": "Navbar",
+ "path": "/documentation/components/navbar"
+ },
+ "components-pagination": {
+ "name": "Pagination",
+ "path": "/documentation/components/pagination"
+ },
+ "components-panel": {
+ "name": "Panel",
+ "path": "/documentation/components/panel"
+ },
+ "components-tabs": {
+ "name": "Tabs",
+ "path": "/documentation/components/tabs"
}
},
"order": {
- "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"]
+ "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
+ "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
}
}
---
title: Breadcrumb
+subtitle: "A simple <strong>breadcrumb</strong> component to improve your navigation experience"
layout: documentation
doc-tab: components
doc-subtab: breadcrumb
+breadcrumb:
+- home
+- documentation
+- components
+- components-breadcrumb
+meta:
+- since: "0.4.3"
+- variables: true
+- colors: false
+- sizes: true
---
-{% include subnav/subnav-components.html %}
-
{% capture breadcrumb_example %}
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
</nav>
{% endcapture %}
-<section class="section">
- <div class="container">
-
- <h1 class="title">Breadcrumb</h1>
- <h2 class="subtitle">
- A simple <strong>breadcrumb</strong> component to improve your navigation experience
- </h2>
- {%
- include meta.html
- since="0.4.3"
- variables=true
- colors=false
- sizes=true
- %}
-
- <hr>
-
- <div class="content">
- <p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
- <p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
- <p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
- </div>
-
- <hr>
- {% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
+<div class="content">
+ <p>The <strong>breadcrumb</strong> component only requires a <code>.breadcrumb</code> container and a <code>ul</code> list.</p>
+ <p>The dividers are automatically created in the content of the <code>::before</code> pseudo-element of <code>li</code> tags.</p>
+ <p>You can inform the current page using the <code>is-active</code> modifier in a <code>li</code> tag. It will disable the navigation of inner links.</p>
+</div>
- {% include anchor.html name="Alignment" %}
+<hr>
+{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
- <div class="content">
- <p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
- </div>
+{% include anchor.html name="Alignment" %}
- {% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
+<div class="content">
+ <p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
+</div>
- {% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
+{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
- {% include anchor.html name="Icons" %}
+{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
- <div class="content">
- <p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
- </div>
+{% include anchor.html name="Icons" %}
- {% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
+<div class="content">
+ <p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
+</div>
- {% include anchor.html name="Alternative separators" %}
+{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
- <div class="content">
- <p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
- </div>
+{% include anchor.html name="Alternative separators" %}
- {% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
+<div class="content">
+ <p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
+</div>
- {% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
+{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
- {% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
+{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
- {% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
+{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
- {% include anchor.html name="Sizes" %}
+{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
- <div class="content">
- <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
- </div>
+{% include anchor.html name="Sizes" %}
- {% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
+<div class="content">
+ <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+</div>
- {% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
+{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
- {% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
+{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
- {% include variables.html type='component' %}
+{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
- </div>
-</section>
+{% include variables.html type='component' %}
---
title: Card
+subtile: "An all-around flexible and composable component"
layout: documentation
doc-tab: components
doc-subtab: card
+breadcrumb:
+- home
+- documentation
+- components
+- components-card
+meta:
+- variables: true
+- colors: false
+- sizes: false
---
{% capture card_example %}
</div>
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Card</h1>
- <h2 class="subtitle">An all-around flexible and composable component</h2>
- {%
- include meta.html
- variables=true
- colors=false
- sizes=false
- %}
-
- <hr>
-
- <div class="content">
- <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
+<div class="content">
+ <p>The <strong>card</strong> component comprises several elements that you can mix and match:</p>
+ <ul>
+ <li>
+ <code>card</code>: the main container
<ul>
<li>
- <code>card</code>: the main container
+ <code>card-header</code>: a horizontal bar with a shadow
<ul>
<li>
- <code>card-header</code>: a horizontal bar with a shadow
- <ul>
- <li>
- <code>card-header-title</code>: a left-aligned bold text
- </li>
- <li>
- <code>card-header-icon</code>: a placeholder for an icon
- </li>
- </ul>
- </li>
- <li>
- <code>card-image</code>: a fullwidth container for a responsive image
+ <code>card-header-title</code>: a left-aligned bold text
</li>
<li>
- <code>card-content</code>: a multi-purpose container for <em>any</em> other element
+ <code>card-header-icon</code>: a placeholder for an icon
</li>
+ </ul>
+ </li>
+ <li>
+ <code>card-image</code>: a fullwidth container for a responsive image
+ </li>
+ <li>
+ <code>card-content</code>: a multi-purpose container for <em>any</em> other element
+ </li>
+ <li>
+ <code>card-footer</code>: a horizontal list of controls
+ <ul>
<li>
- <code>card-footer</code>: a horizontal list of controls
- <ul>
- <li>
- <code>card-footer-item</code>: a repeatable list item
- </li>
- </ul>
+ <code>card-footer-item</code>: a repeatable list item
</li>
</ul>
</li>
</ul>
- </div>
-
- <div class="tags has-addons">
- <span class="tag">New</span>
- <span class="tag is-info">0.5.3</span>
- </div>
-
- <div class="content">
- <p>
- You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
- </p>
- </div>
+ </li>
+ </ul>
+</div>
- <hr>
+<div class="tags has-addons">
+ <span class="tag">New</span>
+ <span class="tag is-info">0.5.3</span>
+</div>
- <div class="columns">
- <div class="column is-one-third">
- {{card_example}}
- </div>
- <div class="column highlight-full">
- {% highlight html %}{{card_example}}{% endhighlight %}
- </div>
- </div>
+<div class="content">
+ <p>
+ You can center the <code>card-header-title</code> by appending the <code>is-centered</code> modifier.
+ </p>
+</div>
- <hr>
+<hr>
-
<div class="column is-one-third">
- {{card_header_example}}
- </div>
-
<div class="column highlight-full">
- {% highlight html %}{{card_header_example}}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-one-third">
+ {{card_example}}
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{card_example}}{% endhighlight %}
+ </div>
+</div>
- <hr>
+<hr>
-
<div class="column is-one-third">
- {{card_title_example}}
- </div>
-
<div class="column highlight-full">
- {% highlight html %}{{card_title_example}}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-one-third">
+ {{card_header_example}}
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{card_header_example}}{% endhighlight %}
+ </div>
+</div>
- {% include variables.html type='component' %}
+<hr>
+<div class="columns">
+ <div class="column is-one-third">
+ {{card_title_example}}
+ </div>
+ <div class="column highlight-full">
+ {% highlight html %}{{card_title_example}}{% endhighlight %}
</div>
-</section>
+</div>
+
+{% include variables.html type='component' %}
---
title: Dropdown
+subtitle: "An interactive <strong>dropdown menu</strong> for discoverable content"
layout: documentation
doc-tab: components
doc-subtab: dropdown
+breadcrumb:
+- home
+- documentation
+- components
+- components-dropdown
+meta:
+- colors: false
+- sizes: false
+- variables: true
---
{% capture dropdown_example %}
</div>
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-<section class="section">
- <div class="container">
-
- <h1 class="title">Dropdown</h1>
- <h2 class="subtitle">
- An interactive <strong>dropdown menu</strong> for discoverable content
- </h2>
- {%
- include meta.html
- new=true
- since="0.4.4"
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>
- The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
- </p>
+<div class="content">
+ <p>
+ The <code>dropdown</code> component is a container for a dropdown button and a dropdown menu.
+ </p>
+ <ul>
+ <li>
+ <code>dropdown</code> the <strong>main</strong> container
<ul>
<li>
- <code>dropdown</code> the <strong>main</strong> container
+ <code>dropdown-trigger</code> the container for a <code>button</code>
+ </li>
+ <li>
+ <code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
<ul>
<li>
- <code>dropdown-trigger</code> the container for a <code>button</code>
- </li>
- <li>
- <code>dropdown-menu</code> the toggable menu, <strong>hidden</strong> by default
+ <code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
<ul>
<li>
- <code>dropdown-content</code> the dropdown <strong>box</strong>, with a white background and a shadow
- <ul>
- <li>
- <code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
- </li>
- <li>
- <code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
- </li>
- </ul>
+ <code>dropdown-item</code> each <strong>single item</strong> of the dropdown, which can either be a <code>a</code> or a <code>div</code>
+ </li>
+ <li>
+ <code>dropdown-divider</code> a <strong>horizontal line</strong> to separate dropdown items
</li>
</ul>
</li>
</ul>
</li>
</ul>
- </div>
+ </li>
+ </ul>
+</div>
-
<div class="column is-half">
- {{dropdown_example}}
- </div>
-
<div class="column is-half highlight-full">
- {% highlight html %}{{dropdown_example}}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-half">
+ {{dropdown_example}}
+ </div>
+ <div class="column is-half highlight-full">
+ {% highlight html %}{{dropdown_example}}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Dropdown content" %}
+{% include anchor.html name="Dropdown content" %}
- While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
- </p>
- </div>
+<div class="content">
+ <p>
+ While the <code>dropdown-item</code> can be used as an anchor link <code><a></code>, you can also use a <code><div></code> and insert almost <strong>any type of content</strong>.
+ </p>
+</div>
-
<div class="column is-half">
- {{dropdown_content_example}}
- </div>
-
<div class="column is-half">
- {% highlight html %}{{dropdown_content_example}}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-half">
+ {{dropdown_content_example}}
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{dropdown_content_example}}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Hoverable or Toggable" %}
+{% include anchor.html name="Hoverable or Toggable" %}
- The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
- </p>
- <li>
- <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
- </li>
- <li>
- <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
- </li>
- </ul>
- </div>
+<div class="content">
+ <p>
+ The <code>dropdown</code> component has <strong>2 additional modifiers</strong>
+ </p>
+ <ul>
+ <li>
+ <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the <code>dropdown-trigger</code>
+ </li>
+ <li>
+ <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
+ </li>
+ </ul>
+</div>
-
<div class="message is-success">
-
<p class="message-body">
- While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
- </p>
- </div>
+<div class="message is-success">
+ <p class="message-body">
+ While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
+ </p>
+</div>
-
<div class="column is-half">
- {{dropdown_click_example}}{{dropdown_info_example}}
- </div>
-
<div class="column is-half">
- {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-half">
+ {{dropdown_click_example}}{{dropdown_info_example}}
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{dropdown_click_example}}{{dropdown_info_example}}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Right aligned" %}
+{% include anchor.html name="Right aligned" %}
- You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
- </p>
- </div>
+<div class="content">
+ <p>
+ You can add the <code>is-right</code> modifier to have a <strong>right-aligned</strong> dropdown.
+ </p>
+</div>
- <div class="columns">
- <div class="column is-half">
- <div class="level is-mobile">
- <div class="level-left">
- <div class="level-item">
- {{dropdown_left_example}}
- </div>
- </div>
- <div class="level-right">
- <div class="level-item">
- {{dropdown_right_example}}
- </div>
- </div>
+<div class="columns">
+ <div class="column is-half">
+ <div class="level is-mobile">
+ <div class="level-left">
+ <div class="level-item">
+ {{dropdown_left_example}}
</div>
</div>
- <div class="column is-half">
- {% highlight html %}{{dropdown_right_example}}{% endhighlight %}
+ <div class="level-right">
+ <div class="level-item">
+ {{dropdown_right_example}}
+ </div>
</div>
</div>
+ </div>
+ <div class="column is-half">
+ {% highlight html %}{{dropdown_right_example}}{% endhighlight %}
+ </div>
+</div>
- {% include anchor.html name="Dropup" %}
-
- <div class="content">
- <p>
- You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
- </p>
- </div>
-
- <div class="columns">
- <div class="column is-half">
- {{ dropdown_up_example }}
- </div>
- <div class="column is-half">
- {% highlight html %}{{dropdown_up_example}}{% endhighlight %}
- </div>
- </div>
+{% include anchor.html name="Dropup" %}
- {% include variables.html type='component' %}
+<div class="content">
+ <p>
+ You can add the <code>is-up</code> modifier to have a dropdown menu that appears above the dropdown button.
+ </p>
+</div>
+<div class="columns">
+ <div class="column is-half">
+ {{ dropdown_up_example }}
</div>
-</section>
+ <div class="column is-half">
+ {% highlight html %}{{dropdown_up_example}}{% endhighlight %}
+ </div>
+</div>
+
+{% include variables.html type='component' %}
---
title: Menu
+subtitle: "A simple <strong>menu</strong>, for any type of vertical navigation"
layout: documentation
doc-tab: components
doc-subtab: menu
+breadcrumb:
+- home
+- documentation
+- components
+- components-menu
+meta:
+- colors: false
+- sizes: false
+- variables: true
---
{% capture menu_example %}
</aside>
{% endcapture %}
-{% include subnav/subnav-components.html %}
+{% include snippet.html content=menu_example size="one-third" %}
-<section class="section">
- <div class="container">
- <h1 class="title">Menu</h1>
- <h2 class="subtitle">A simple <strong>menu</strong>, for any type of vertical navigation</h2>
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- {% include snippet.html content=menu_example size="one-third" %}
-
- {% include variables.html type='component' %}
-
- </div>
-</section>
+{% include variables.html type='component' %}
---
title: Message
+subtitle: "Colored <strong>message</strong> blocks, to emphasize part of your page"
layout: documentation
doc-tab: components
doc-subtab: message
+meta:
+- colors: true
+- sizes: true
+- variables: true
+breadcrumb:
+- home
+- documentation
+- components
+- components-message
---
{% capture message_example %}
{% endfor %}
{% endcapture %}
-{% include subnav/subnav-components.html %}
+{% include snippet.html content=message_example %}
-<section class="section">
- <div class="container">
- <h1 class="title">Messages</h1>
- <h2 class="subtitle">
- Colored <strong>message</strong> blocks, to emphasize part of your page
- </h2>
- {%
- include meta.html
- colors=true
- sizes=true
- variables=true
- %}
+{% include anchor.html name="Colors" %}
- <hr>
+{% include snippet.html content=message_colors_example %}
- {% include snippet.html content=message_example %}
+{% include anchor.html name="Message body only" %}
- {% include anchor.html name="Colors" %}
+<div class="content">
+ <p>You can <strong>omit</strong> the message header:</p>
+</div>
- {% include snippet.html content=message_colors_example %}
+{% include snippet.html content=message_body_example %}
- {% include anchor.html name="Message body only" %}
+{% include anchor.html name="Sizes" %}
- <div class="content">
- <p>You can <strong>omit</strong> the message header:</p>
- </div>
+{% include snippet.html content=message_small %}
- {% include snippet.html content=message_body_example %}
+{% include snippet.html content=message_normal %}
- {% include anchor.html name="Sizes" %}
+{% include snippet.html content=message_medium %}
- {% include snippet.html content=message_small %}
+{% include snippet.html content=message_large %}
- {% include snippet.html content=message_normal %}
-
- {% include snippet.html content=message_medium %}
-
- {% include snippet.html content=message_large %}
-
- {% include variables.html type='component' %}
-
- </div>
-</section>
+{% include variables.html type='component' %}
---
title: Modal
+subtitle: "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want"
layout: documentation
doc-tab: components
doc-subtab: modal
+meta:
+- colors: false
+- sizes: false
+- variables: true
+breadcrumb:
+- home
+- documentation
+- components
+- components-modal
---
{% capture modal %}
</div>
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Modal</h1>
- <h2 class="subtitle">A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want</h2>
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>The modal structure is very simple:</p>
+<div class="content">
+ <p>The modal structure is very simple:</p>
+ <ul>
+ <li>
+ <code>modal</code>: the main container
<ul>
<li>
- <code>modal</code>: the main container
- <ul>
- <li>
- <code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
- </li>
- <li>
- <code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
- </li>
- <li>
- <code>modal-close</code>: a simple cross located in the top right corner
- </li>
- </ul>
+ <code>modal-background</code>: a transparent overlay that can act as a click target to close the modal
+ </li>
+ <li>
+ <code>modal-content</code>: a horizontally and vertically centered container, with a maximum width of 640px, in which you can include <em>any</em> content
+ </li>
+ <li>
+ <code>modal-close</code>: a simple cross located in the top right corner
</li>
</ul>
- <p>
- <button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
- </p>
- </div>
-
- {% highlight html %}{{ modal }}{% endhighlight %}
+ </li>
+ </ul>
+ <p>
+ <button class="button is-primary is-large modal-button" data-target="modal" aria-haspopup="true">Launch example modal</button>
+ </p>
+</div>
- <div class="content">
- <p>To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container</p>
- </div>
+{% highlight html %}{{ modal }}{% endhighlight %}
- <div class="message is-danger">
- <div class="message-header">
- No JavaScript
- </div>
- <div class="message-body">
- Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
- </div>
- </div>
+<div class="content">
+ <p>To <strong>activate</strong> the modal, just add the <code>is-active</code> modifier on the <code>.modal</code> container</p>
+</div>
- <hr>
+<div class="message is-danger">
+ <div class="message-header">
+ No JavaScript
+ </div>
+ <div class="message-body">
+ Bulma does <strong>not</strong> include any JavaScript interaction. You will have to implement the class toggle yourself.
+ </div>
+</div>
- <h3 class="title">Image modal</h3>
+<hr>
- <div class="content">
- <p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
- <p>
- <a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
- </p>
- </div>
+<h3 class="title">Image modal</h3>
- {% highlight html %}{{ image_modal }}{% endhighlight %}
+<div class="content">
+ <p>Because a modal can contain <strong>anything you want</strong>, you can very simply use it to build an image gallery for example:</p>
+ <p>
+ <a class="button is-primary is-large modal-button" data-target="modal-bis">Launch image modal</a>
+ </p>
+</div>
- <hr>
+{% highlight html %}{{ image_modal }}{% endhighlight %}
- <h3 class="title">Modal card</h3>
+<hr>
- <div class="content">
- <p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
- <p>
- <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
- </p>
- </div>
+<h3 class="title">Modal card</h3>
- <div class="highlight-full">
- {% highlight html %}{{ modal_card }}{% endhighlight %}
- </div>
+<div class="content">
+ <p>If you want a more classic modal, with a <strong>head</strong>, a <strong>body</strong> and a <strong>foot</strong>, use the <code>modal-card</code>.</p>
+ <p>
+ <button class="button is-primary is-large modal-button" data-target="modal-ter" aria-haspopup="true">Launch card modal</button>
+ </p>
+</div>
- {% include variables.html type='component' %}
+<div class="highlight-full">
+ {% highlight html %}{{ modal_card }}{% endhighlight %}
+</div>
- </div>
-</section>
+{% include variables.html type='component' %}
<div id="modal" class="modal">
<div class="modal-background"></div>
---
title: Navbar
+subtitle: "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns"
layout: documentation
doc-tab: components
doc-subtab: navbar
+breadcrumb:
+- home
+- documentation
+- components
+- components-navbar
+meta:
+- colors: true
+- sizes: false
+- variables: true
---
-{% include subnav/subnav-components.html %}
-
{% capture navbar_example %}
{% include examples/navbar.html id="Default" %}
{% endcapture %}
</nav>
{% endcapture %}
-<section class="section">
- <div class="container">
-
- <h1 class="title">Navbar</h1>
- <h2 class="subtitle">
- A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns
- </h2>
- {%
- include meta.html
- new=true
- since="0.4.3"
- colors=true
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="message is-success">
- <div class="message-body">
- <p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
- </div>
- </div>
+<div class="message is-success">
+ <div class="message-body">
+ <p>The new <code>navbar</code> replaces the deprecated <code>nav</code> component, whose documentation you can still access temporarily <a href="{{ site.url }}/documentation/components/nav/">here</a>.</p>
+ </div>
+</div>
- <div class="content">
- <p>
- The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
- </p>
+<div class="content">
+ <p>
+ The <code>navbar</code> component is a responsive and versatile horizontal navigation bar with the following structure:
+ </p>
+ <ul>
+ <li>
+ <code>navbar</code> the <strong>main</strong> container
<ul>
<li>
- <code>navbar</code> the <strong>main</strong> container
+ <code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
<ul>
<li>
- <code>navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
- <ul>
- <li>
- <code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
- </li>
- </ul>
+ <code>navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
+ </li>
+ </ul>
+ </li>
+ <li>
+ <code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
+ <ul>
+ <li>
+ <code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
</li>
<li>
- <code>navbar-menu</code> the <strong>right side</strong>, hidden on touch devices, visible on desktop
+ <code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
<ul>
<li>
- <code>navbar-start</code> the <strong>left part</strong> of the menu, which appears next to the navbar brand on desktop
- </li>
- <li>
- <code>navbar-end</code> the <strong>right part</strong> of the menu, which appears at the end of the navbar
+ <code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be an <code>a</code> or a <code>div</code>
<ul>
<li>
- <code>navbar-item</code> each <strong>single item</strong> of the navbar, which can either be an <code>a</code> or a <code>div</code>
+ <code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
+ </li>
+ <li>
+ <code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
<ul>
<li>
- <code>navbar-link</code> a <strong>link</strong> as the sibling of a dropdown, with an arrow
- </li>
- <li>
- <code>navbar-dropdown</code> the <strong>dropdown menu</strong>, which can include navbar items and dividers
- <ul>
- <li>
- <code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
- </li>
- </ul>
+ <code>navbar-divider</code> a <strong>horizontal line</strong> to separate navbar items
</li>
</ul>
</li>
</ul>
</li>
</ul>
- </div>
-
- {% include anchor.html name="Navbar brand" %}
-
- <div class="content">
- <p>
- The <code>navbar-brand</code> is the left side of the navbar. It can contain:
- </p>
- <ul>
- <li>
- a number of <code>navbar-item</code>
- </li>
- <li>
- the <code>navbar-burger</code> as last child
- </li>
- </ul>
- </div>
-
- {% highlight html %}{{navbar_brand_example}}{% endhighlight %}
-
- <div class="content">
- <p>
- The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
- </p>
- </div>
-
- <div class="bd-example is-paddingless">
- {{navbar_brand_items_example}}
- </div>
-
- {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
+ </li>
+ </ul>
+</div>
- <div class="content">
- <p>
- On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
- </p>
- </div>
+{% include anchor.html name="Navbar brand" %}
+
+<div class="content">
+ <p>
+ The <code>navbar-brand</code> is the left side of the navbar. It can contain:
+ </p>
+ <ul>
+ <li>
+ a number of <code>navbar-item</code>
+ </li>
+ <li>
+ the <code>navbar-burger</code> as last child
+ </li>
+ </ul>
+</div>
- {% include anchor.html name="Navbar burger" %}
+{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
- The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
- </p>
- </div>
+<div class="content">
+ <p>
+ The navbar brand is <strong>always visible</strong>: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
+ </p>
+</div>
- <div class="example is-paddingless">
- <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- </a>
- </div>
+<div class="bd-example is-paddingless">
+ {{navbar_brand_items_example}}
+</div>
- {% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
+{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
- You can add the modifier class <code>is-active</code> to turn it into a cross.
- </p>
- </div>
+<div class="content">
+ <p>
+ On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.
+ </p>
+</div>
- <div class="example is-paddingless">
- <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- <span aria-hidden="true"></span>
- </a>
- </div>
+{% include anchor.html name="Navbar burger" %}
- {% include anchor.html name="Navbar menu" %}
+<div class="content">
+ <p>
+ The <code>navbar-burger</code> is a hamburger menu that only appears on <strong>mobile</strong>. It has to appear as the last child of <code>navbar-brand</code>.
+ </p>
+</div>
- <div class="content">
- <p>
- The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar</code>, as a sibling of <code>navbar-brand</code>.
- </p>
- </div>
+<div class="example is-paddingless">
+ <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" style="display: flex;">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </a>
+</div>
- {% highlight html %}{{navbar_menu_example}}{% endhighlight %}
+{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}
- The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
- </p>
- </div>
+<div class="content">
+ <p>
+ You can add the modifier class <code>is-active</code> to turn it into a cross.
+ </p>
+</div>
- {% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
+<div class="example is-paddingless">
+ <a role="button" class="navbar-burger is-active" aria-label="menu" aria-expanded="false" style="display: flex;">
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ <span aria-hidden="true"></span>
+ </a>
+</div>
- <div class="content">
- <p>
- On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
- </p>
- <ul>
- <li>
- <code>navbar-start</code>
- </li>
- <li>
- <code>navbar-end</code>
- </li>
- </ul>
- </div>
+{% include anchor.html name="Navbar menu" %}
- <hr>
+<div class="content">
+ <p>
+ The <code>navbar-menu</code> is the <strong>counterpart</strong> of the navbar brand. As such, it must appear as a direct child of <code>navbar</code>, as a sibling of <code>navbar-brand</code>.
+ </p>
+</div>
- <div id="navbarJsExample" class="message is-info">
- <h4 class="message-header">Javascript toggle</h4>
- <div class="message-body">
- <div class="content">
- <p>
- The Bulma package <strong>does not come with any JavaScript</strong>.
- <br>
- Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>.
- </p>
+{% highlight html %}{{navbar_menu_example}}{% endhighlight %}
- {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
+<div class="content">
+ <p>
+ The <code>navbar-menu</code> is <strong>hidden on touch devices</strong> {% include bp/touch.html %}. You need to add the modifier class <code>is-active</code> to display it.
+ </p>
+</div>
- {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
- </div>
- </div>
- </div>
+{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}
+
+<div class="content">
+ <p>
+ On desktop {% include bp/desktop.html %}, the <code>navbar-menu</code> will <strong>fill up the space</strong> available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:
+ </p>
+ <ul>
+ <li>
+ <code>navbar-start</code>
+ </li>
+ <li>
+ <code>navbar-end</code>
+ </li>
+ </ul>
+</div>
- {% include anchor.html name="Navbar start and navbar end" %}
+<hr>
+<div id="navbarJsExample" class="message is-info">
+ <h4 class="message-header">Javascript toggle</h4>
+ <div class="message-body">
<div class="content">
<p>
- The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
- </p>
- <p>
- On desktop {% include bp/desktop.html %}:
- </p>
- <ul>
- <li>
- <code>navbar-start</code> will appear on the <strong>left</strong>
- </li>
- <li>
- <code>navbar-end</code> will appear on the <strong>right</strong>
- </li>
- </ul>
- <p>
- Each of them can contain any number of <code>navbar-item</code>.
+ The Bulma package <strong>does not come with any JavaScript</strong>.
+ <br>
+ Here is however an implementation example, which toggles the class <code>is-active</code> on both the <code>navbar-burger</code> and the targeted <code>navbar-menu</code>.
</p>
- </div>
-
- {% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
- {% include anchor.html name="Navbar item" %}
+ {% highlight html %}{{ navbar_js_html }}{% endhighlight %}
- <div class="content">
- <p>
- A <code>navbar-item</code> is a repeatable element that can be:
- </p>
- <ul class="bd-spaced">
- <li>
- a navigation <strong>link</strong>
- {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
- </li>
- <li>
- a container for the <strong>brand logo</strong>
- {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
- </li>
- <li>
- the <strong>parent</strong> of a dropdown menu
- {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
- </li>
- <li>
- a child of a <strong>navbar dropdown</strong>
- {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
- </li>
- <li>
- a container for almost <strong>anything</strong> you want, like a <code>field</code>
- <div class="highlight-full">
- {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
- </div>
- </li>
- </ul>
- <p>
- It can either be an anchor tag <code><a></code> or a <code><div></code>, as a <strong>direct child</strong> of either:
- </p>
- <ul>
- <li>
- <code>navbar</code>
- </li>
- <li>
- <code>navbar-brand</code>
- </li>
- <li>
- <code>navbar-start</code>
- </li>
- <li>
- <code>navbar-end</code>
- </li>
- <li>
- <code>navbar-dropdown</code>
- </li>
- </ul>
- <p>
- You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
- </p>
+ {% highlight javascript %}{{ navbar_js_code }}{% endhighlight %}
</div>
+ </div>
+</div>
- {% include anchor.html name="Transparent navbar" %}
-
- <div class="content">
- <p>
- To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifier on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
- </p>
- </div>
+{% include anchor.html name="Navbar start and navbar end" %}
+
+<div class="content">
+ <p>
+ The <code>navbar-start</code> and <code>navbar-end</code> are the two direct and only children of the <code>navbar-menu</code>.
+ </p>
+ <p>
+ On desktop {% include bp/desktop.html %}:
+ </p>
+ <ul>
+ <li>
+ <code>navbar-start</code> will appear on the <strong>left</strong>
+ </li>
+ <li>
+ <code>navbar-end</code> will appear on the <strong>right</strong>
+ </li>
+ </ul>
+ <p>
+ Each of them can contain any number of <code>navbar-item</code>.
+ </p>
+</div>
- {% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
+{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
+
+{% include anchor.html name="Navbar item" %}
+
+<div class="content">
+ <p>
+ A <code>navbar-item</code> is a repeatable element that can be:
+ </p>
+ <ul class="bd-spaced">
+ <li>
+ a navigation <strong>link</strong>
+ {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
+ </li>
+ <li>
+ a container for the <strong>brand logo</strong>
+ {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
+ </li>
+ <li>
+ the <strong>parent</strong> of a dropdown menu
+ {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
+ </li>
+ <li>
+ a child of a <strong>navbar dropdown</strong>
+ {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
+ </li>
+ <li>
+ a container for almost <strong>anything</strong> you want, like a <code>field</code>
+ <div class="highlight-full">
+ {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}
+ </div>
+ </li>
+ </ul>
+ <p>
+ It can either be an anchor tag <code><a></code> or a <code><div></code>, as a <strong>direct child</strong> of either:
+ </p>
+ <ul>
+ <li>
+ <code>navbar</code>
+ </li>
+ <li>
+ <code>navbar-brand</code>
+ </li>
+ <li>
+ <code>navbar-start</code>
+ </li>
+ <li>
+ <code>navbar-end</code>
+ </li>
+ <li>
+ <code>navbar-dropdown</code>
+ </li>
+ </ul>
+ <p>
+ You can add the modifier class <code>is-expanded</code> to turn it into a full-width element.
+ </p>
+</div>
- {% include anchor.html name="Fixed navbar" %}
+{% include anchor.html name="Transparent navbar" %}
- {% include elements/new-tag.html version="0.6.1" %}
+<div class="content">
+ <p>
+ To seamlessly integrate the navbar in any visual context, you can add the <code>is-transparent</code> modifier on the <code>navbar</code> component. This will remove any hover or active background from the navbar items.
+ </p>
+</div>
- <div class="content">
- <p>
- You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
- </p>
- <ul class="bd-spaced">
- <li>
- Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
- {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
- </li>
- <li>
- Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to either <code><html></code> or <code><body></code> element to provide the appropriate padding to the page
- {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
- </li>
- </ul>
- </div>
+{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
+
+{% include anchor.html name="Fixed navbar" %}
+
+{% include elements/new-tag.html version="0.6.1" %}
+
+<div class="content">
+ <p>
+ You can now <strong>fix</strong> the navbar to either the <strong>top</strong> or <strong>bottom</strong> of the page. This is a 2-step process:
+ </p>
+ <ul class="bd-spaced">
+ <li>
+ Add either <code>is-fixed-top</code> or <code>is-fixed-bottom</code> to the <code>navbar</code> component
+ {% highlight html %}<nav class="navbar is-fixed-top">{% endhighlight %}
+ </li>
+ <li>
+ Add the corresponding <code>has-navbar-fixed-top</code> or <code>has-navbar-fixed-bottom</code> modifier to either <code><html></code> or <code><body></code> element to provide the appropriate padding to the page
+ {% highlight html %}<html class="has-navbar-fixed-top">{% endhighlight %}
+ </li>
+ </ul>
+</div>
- <h4 class="title is-5">Try it out!</h4>
+<h4 class="title is-5">Try it out!</h4>
-
<div id="navbarToggles" class="buttons">
-
<a id="navbarFixBottom" class="button is-link">
- <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
- </a>
- </div>
+<div id="navbarToggles" class="buttons">
+ <a id="navbarFixBottom" class="button is-link">
+ <span><span id="navbarFixBottomText">Show</span> <strong>bottom</strong> navbar</span>
+ </a>
+</div>
- {% include anchor.html name="Dropdown menu" %}
+{% include anchor.html name="Dropdown menu" %}
+
+<div class="content">
+ <p>
+ To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
+ </p>
+ <ul>
+ <li>
+ <code>navbar-item</code> with the <code>has-dropdown</code> modifier
+ </li>
+ <li>
+ <code>navbar-link</code> which contains the dropdown arrow
+ </li>
+ <li>
+ <code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
+ </li>
+ </ul>
+</div>
- <div class="content">
- <p>
- To create a <strong>dropdown menu</strong>, you will need <strong>4</strong> elements:
- </p>
- <ul>
- <li>
- <code>navbar-item</code> with the <code>has-dropdown</code> modifier
- </li>
- <li>
- <code>navbar-link</code> which contains the dropdown arrow
- </li>
- <li>
- <code>navbar-dropdown</code> which can contain instances of <code>navbar-item</code> and <code>navbar-divider</code>
- </li>
- </ul>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_example }}
</div>
+ </div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_example }}
- </div>
- </div>
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}
- </div>
- </div>
+<h4 class="title is-4">
+ Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
+</h4>
+
+<div class="content">
+ <p>
+ The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
+ </p>
+ <p>
+ The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
+ </p>
+ <ul>
+ <li>
+ <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the parent <code>navbar-item</code>
+ </li>
+ <li>
+ <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
+ </li>
+ </ul>
+</div>
- <h4 class="title is-4">
- Show/hide the dropdown with either <strong>CSS</strong> or <strong>JavaScript</strong>
- </h4>
+<div class="message is-success">
+ <p class="message-body">
+ While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
+ </p>
+</div>
- <div class="content">
- <p>
- The <code>navbar-dropdown</code> is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. <em>How</em> the dropdown is displayed on desktop depends on the parent's class.
- </p>
- <p>
- The <code>navbar-item</code> with the <code>has-dropdown</code> modifier, has <strong>2 additional modifiers</strong>
- </p>
- <ul>
- <li>
- <code>is-hoverable</code>: the dropdown will show up when <strong>hovering</strong> the parent <code>navbar-item</code>
- </li>
- <li>
- <code>is-active</code>: the dropdown will show up <strong>all the time</strong>
- </li>
- </ul>
- </div>
+{% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
- <div class="message is-success">
- <p class="message-body">
- While the CSS <code>:hover</code> implementation works perfectly, the <code>is-active</code> class is available for users who want to control the display of the dropdown with <strong>JavaScript</strong>.
- </p>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_hover_example }}
</div>
+ </div>
- {% highlight html %}{{ navbar_dropdown_hover_snippet }}{% endhighlight %}
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_hover_example }}
- </div>
- </div>
+{% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_active_example }}
</div>
+ </div>
- {% highlight html %}{{ navbar_dropdown_active_snippet }}{% endhighlight %}
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_active_example }}
- </div>
- </div>
+<h4 class="title is-4">
+ Right dropdown
+</h4>
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}
- </div>
- </div>
+<div class="content">
+ <p>
+ If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
+ </p>
+</div>
- <h4 class="title is-4">
- Right dropdown
- </h4>
+{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
- <div class="content">
- <p>
- If your parent <code>navbar-item</code> is on the right side, you can position the dropdown to start from the <strong>right</strong> with the <code>is-right</code> modifier.
- </p>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_right_example }}
</div>
+ </div>
- {% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_right_example }}
- </div>
- </div>
+<h4 class="title is-4">
+ Dropup
+</h4>
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_right_example }}{% endhighlight %}
- </div>
- </div>
+{% include elements/new-tag.html version="0.6.1" %}
- <h4 class="title is-4">
- Dropup
- </h4>
+<div class="content">
+ <p>
+ If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
+ </p>
+</div>
- {% include elements/new-tag.html version="0.6.1" %}
+{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
- <div class="content">
- <p>
- If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
- </p>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropup_example }}
</div>
+ </div>
- {% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
+ <div class="column">
+ {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropup_example }}
- </div>
- </div>
+<h4 class="title is-4">
+ Styles for the dropdown menu
+</h4>
+
+<div class="content">
+ <p>
+ By default, the <code>navbar-dropdown</code> has:
+ </p>
+ <ul>
+ <li>
+ a grey <code>border-top</code>
+ </li>
+ <li>
+ a <code>border-radius</code> at both bottom corners
+ </li>
+ </ul>
+</div>
- <div class="column">
- {% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_default_example }}
</div>
+ </div>
- <h4 class="title is-4">
- Styles for the dropdown menu
- </h4>
-
- <div class="content">
- <p>
- By default, the <code>navbar-dropdown</code> has:
- </p>
- <ul>
- <li>
- a grey <code>border-top</code>
- </li>
- <li>
- a <code>border-radius</code> at both bottom corners
- </li>
- </ul>
- </div>
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_default_example }}
- </div>
- </div>
+<div class="content">
+ <p>
+ When having a <a href="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
+ </p>
+ <ul>
+ <li>
+ the grey border is <strong>removed</strong>
+ </li>
+ <li>
+ a slight <strong>inner shadow</strong> is added
+ </li>
+ <li>
+ all corners are <strong>rounded</strong>
+ </li>
+ <li>
+ the hover/active state is <strong>animated</strong>
+ </li>
+ </ul>
+</div>
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_boxed_example }}
</div>
+ </div>
- <div class="content">
- <p>
- When having a <a href="#transparent-navbar">transparent navbar</a>, it is preferable to use the boxed version of the dropdown, by using the <code>is-boxed</code> modifier.
- </p>
- <ul>
- <li>
- the grey border is <strong>removed</strong>
- </li>
- <li>
- a slight <strong>inner shadow</strong> is added
- </li>
- <li>
- all corners are <strong>rounded</strong>
- </li>
- <li>
- the hover/active state is <strong>animated</strong>
- </li>
- </ul>
- </div>
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
+ </div>
+</div>
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_boxed_example }}
- </div>
- </div>
+<h4 class="title is-4">
+ Active dropdown navbar item
+</h4>
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}
- </div>
+<div class="columns">
+ <div class="column">
+ <div class="bd-example is-paddingless">
+ {{ navbar_dropdown_item_active_example }}
</div>
+ </div>
- <h4 class="title is-4">
- Active dropdown navbar item
- </h4>
-
- <div class="columns">
- <div class="column">
- <div class="bd-example is-paddingless">
- {{ navbar_dropdown_item_active_example }}
- </div>
- </div>
-
- <div class="column">
- {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
- </div>
- </div>
+ <div class="column">
+ {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}
+ </div>
+</div>
- <h4 class="title is-4">
- Dropdown divider
- </h4>
+<h4 class="title is-4">
+ Dropdown divider
+</h4>
- You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
- </p>
- </div>
+<div class="content">
+ <p>
+ You can add a <code>navbar-divider</code> to display a <strong>horizontal rule</strong> in a <code>navbar-dropdown</code>.
+ </p>
+</div>
- {% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
+{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
- {% include anchor.html name="Colors" %}
+{% include anchor.html name="Colors" %}
-
<div class="tags has-addons">
- <span class="tag">New!</span>
- <span class="tag is-info">0.5.2</span>
- </div>
+<div class="tags has-addons">
+ <span class="tag">New!</span>
+ <span class="tag is-info">0.5.2</span>
+</div>
- You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
- </p>
- <li><code>is-primary</code></li>
- <li><code>is-link</code></li>
- <li><code>is-info</code></li>
- <li><code>is-success</code></li>
- <li><code>is-warning</code></li>
- <li><code>is-danger</code></li>
- <li><code>is-black</code></li>
- <li><code>is-dark</code></li>
- <li><code>is-light</code></li>
- <li><code>is-white</code></li>
- </ul>
- </div>
+<div class="content">
+ <p>
+ You can change the background color of the <code>navbar</code> by using one of the <strong>9 color modifiers:</strong>
+ </p>
+ <ul>
+ <li><code>is-primary</code></li>
+ <li><code>is-link</code></li>
+ <li><code>is-info</code></li>
+ <li><code>is-success</code></li>
+ <li><code>is-warning</code></li>
+ <li><code>is-danger</code></li>
+ <li><code>is-black</code></li>
+ <li><code>is-dark</code></li>
+ <li><code>is-light</code></li>
+ <li><code>is-white</code></li>
+ </ul>
+</div>
- {% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
+{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="primary" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="primary" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="link" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="link" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="info" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="info" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="success" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="success" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="warning" light=true %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="warning" light=true %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="danger" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="danger" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="black" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="black" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="dark" %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="dark" %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="light" light=true %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="light" light=true %}
+</div>
-
<div class="bd-example is-paddingless">
- {% include examples/navbar-color.html color="white" light=true %}
- </div>
+<div class="bd-example is-paddingless">
+ {% include examples/navbar-color.html color="white" light=true %}
+</div>
- {% include variables.html type='component' %}
+{% include variables.html type='component' %}
- </div>
-</section>
---
title: Pagination
+subtitle: "A responsive, usable, and flexible <strong>pagination</strong>"
layout: documentation
doc-tab: components
doc-subtab: pagination
+breadcrumb:
+- home
+- documentation
+- components
+- components-pagination
+meta:
+- colors: false
+- sizes: true
+- variables: true
---
{% capture pagination_example %}
</nav>
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Pagination</h1>
- <h2 class="subtitle">A responsive, usable, and flexible <strong>pagination</strong></h2>
- {%
- include meta.html
- colors=false
- sizes=true
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>
- The pagination component consists of several elements:
- </p>
+<div class="content">
+ <p>
+ The pagination component consists of several elements:
+ </p>
+ <ul>
+ <li>
+ <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
+ </li>
+ <li>
+ <code>pagination-list</code> which displays page items:
<ul>
<li>
- <code>pagination-previous</code> and <code>pagination-next</code> for incremental navigation
+ <code>pagination-link</code> for the page numbers
</li>
<li>
- <code>pagination-list</code> which displays page items:
- <ul>
- <li>
- <code>pagination-link</code> for the page numbers
- </li>
- <li>
- <code>pagination-ellipsis</code> for range separators
- </li>
- </ul>
+ <code>pagination-ellipsis</code> for range separators
</li>
</ul>
- <p>
- All elements are optional so you can compose your pagination as you wish.
- </p>
- </div>
-
- {% include snippet.html content=pagination_example horizontal=true more=true %}
+ </li>
+ </ul>
+ <p>
+ All elements are optional so you can compose your pagination as you wish.
+ </p>
+</div>
- <div class="content">
- <p>
- You can disable some links if they are not active, or change the amount of page numbers available.
- </p>
- </div>
+{% include snippet.html content=pagination_example horizontal=true more=true %}
- {% include snippet.html content=pagination_options_example horizontal=true more=true %}
+<div class="content">
+ <p>
+ You can disable some links if they are not active, or change the amount of page numbers available.
+ </p>
+</div>
- <div class="content">
- <p>
- By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
- </p>
- </div>
+{% include snippet.html content=pagination_options_example horizontal=true more=true %}
- {% include snippet.html content=pagination_centered_example horizontal=true more=true %}
+<div class="content">
+ <p>
+ By default on <strong>tablet</strong>, the list is located on the left, and the previous/next buttons on the right. But you can change the <strong>order</strong> of these elements by using the <code>is-centered</code> and <code>is-right</code> modifiers.
+ </p>
+</div>
- {% include snippet.html content=pagination_right_example horizontal=true more=true %}
+{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
- {% include anchor.html name="Styles" %}
+{% include snippet.html content=pagination_right_example horizontal=true more=true %}
- {% include elements/new-tag.html version="0.6.2" %}
+{% include anchor.html name="Styles" %}
- <p class="content">
- Add the <code>is-rounded</code> modifier to have rounded pagination items.
- </p>
+{% include elements/new-tag.html version="0.6.2" %}
- {% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
+<p class="content">
+ Add the <code>is-rounded</code> modifier to have rounded pagination items.
+</p>
- {% include anchor.html name="Sizes" %}
+{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
- <p class="content">
- The pagination comes in <strong>3 additional sizes</strong>.<br>
- You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
- </p>
+{% include anchor.html name="Sizes" %}
- {% include snippet.html content=pagination_small_example horizontal=true more=true %}
+<p class="content">
+ The pagination comes in <strong>3 additional sizes</strong>.<br>
+ You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
+</p>
- {% include snippet.html content=pagination_medium_example horizontal=true more=true %}
+{% include snippet.html content=pagination_small_example horizontal=true more=true %}
- {% include snippet.html content=pagination_large_example horizontal=true more=true %}
+{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
- {% include variables.html type='component' %}
+{% include snippet.html content=pagination_large_example horizontal=true more=true %}
- </div>
-</section>
+{% include variables.html type='component' %}
---
title: Panel
+subtitle: "A composable <strong>panel</strong>, for compact controls"
layout: documentation
doc-tab: components
doc-subtab: panel
+breadcrumb:
+- home
+- documentation
+- components
+- components-panel
+meta:
+- colors: false
+- sizes: false
+- variables: true
---
{% capture panel_example %}
</nav>
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Panel</h1>
- <h2 class="subtitle">A composable <strong>panel</strong>, for compact controls</h2>
- {%
- include meta.html
- colors=false
- sizes=false
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p>
- The <code>panel</code> is container for several types:
- </p>
+<div class="content">
+ <p>
+ The <code>panel</code> is container for several types:
+ </p>
+ <ul>
+ <li>
+ <code>panel-heading</code> as the first child
+ </li>
+ <li>
+ <code>panel-tabs</code> for navigation
+ </li>
+ <li>
+ <code>panel-block</code> which can contain other elements, like:
<ul>
- <li>
- <code>panel-heading</code> as the first child
- </li>
- <li>
- <code>panel-tabs</code> for navigation
- </li>
- <li>
- <code>panel-block</code> which can contain other elements, like:
- <ul>
- <li><code>control</code></li>
- <li><code>input</code></li>
- <li><code>button</code></li>
- <li><code>panel-icon</code></li>
- </ul>
- </li>
+ <li><code>control</code></li>
+ <li><code>input</code></li>
+ <li><code>button</code></li>
+ <li><code>panel-icon</code></li>
</ul>
- <p>
- The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
- </p>
- </div>
-
- {% include snippet.html content=panel_example size="one-third" %}
+ </li>
+ </ul>
+ <p>
+ The <code>panel-block</code> can be an anchor tag <code><a></code> or a label <code><label></code> with a checkbox inside.
+ </p>
+</div>
- {% include variables.html type='component' %}
+{% include snippet.html content=panel_example size="one-third" %}
- </div>
-</section>
+{% include variables.html type='component' %}
---
title: Tabs
+subtitle: "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles"
layout: documentation
doc-tab: components
doc-subtab: tabs
+breadcrumb:
+- home
+- documentation
+- components
+- components-tabs
+meta:
+- colors: false
+- sizes: true
+- variables: true
---
{% capture tabs_example %}
</div>
{% endcapture %}
-{% include subnav/subnav-components.html %}
-
-<section class="section">
- <div class="container">
- <h1 class="title">Tabs</h1>
- <h2 class="subtitle">Simple responsive horizontal navigation <strong>tabs</strong>, with different styles</h2>
- {%
- include meta.html
- since="0.4.4"
- colors=false
- sizes=true
- variables=true
- %}
-
- <hr>
-
- <div class="content">
- <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code><ul></code> list.<br>
- The <strong>default</strong> tabs style has a single border at the bottom.</p>
- </div>
-
- {% include snippet.html content=tabs_example horizontal=true %}
+<div class="content">
+ <p><strong>Tabs</strong> only require a <code>tabs</code> container and a <code><ul></code> list.<br>
+ The <strong>default</strong> tabs style has a single border at the bottom.</p>
+</div>
- {% include snippet.html content=tabs_example horizontal=true more=true %}
+{% include snippet.html content=tabs_example horizontal=true %}
- {% include anchor.html name="Alignment" %}
+{% include snippet.html content=tabs_example horizontal=true more=true %}
- <div class="content">
- <p>
- To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
- </p>
- </div>
+{% include anchor.html name="Alignment" %}
- {% include snippet.html content=tabs_centered_example horizontal=true more=true %}
+<div class="content">
+ <p>
+ To align the tabs list, use the <code>is-centered</code> or <code>is-right</code> modifier on the <code>.tabs</code> container:
+ </p>
+</div>
- {% include snippet.html content=tabs_right_example horizontal=true more=true %}
+{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
- {% include anchor.html name="Icons" %}
+{% include snippet.html content=tabs_right_example horizontal=true more=true %}
- <div class="content">
- <p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
- </div>
+{% include anchor.html name="Icons" %}
- {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
+<div class="content">
+ <p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
+</div>
- {% include snippet.html content=tabs_icons_example horizontal=true more=true %}
+{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
- {% include anchor.html name="Sizes" %}
- <div class="content">
- <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
- </div>
+{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
- {% include snippet.html content=tabs_small_example horizontal=true more=true %}
+{% include anchor.html name="Sizes" %}
+<div class="content">
+ <p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
+</div>
- {% include snippet.html content=tabs_medium_example horizontal=true more=true %}
+{% include snippet.html content=tabs_small_example horizontal=true more=true %}
- {% include snippet.html content=tabs_large_example horizontal=true more=true %}
+{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
- {% include anchor.html name="Styles" %}
+{% include snippet.html content=tabs_large_example horizontal=true more=true %}
- <div class="content">
- If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
- </div>
+{% include anchor.html name="Styles" %}
- {% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
+<div class="content">
+ If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
+</div>
- <p class="content">
- If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
- </p>
+{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
- {% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
+<p class="content">
+ If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
+</p>
- {% include elements/new-tag.html version="0.6.2" %}
+{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
- <p class="content">
- If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
- </p>
+{% include elements/new-tag.html version="0.6.2" %}
- {% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
+<p class="content">
+ If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
+</p>
- <p class="content">
- If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
- </p>
+{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
- {% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
+<p class="content">
+ If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
+</p>
- {% include anchor.html name="Combining" %}
+{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
- <div class="content">
- <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
- </div>
+{% include anchor.html name="Combining" %}
- {% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
+<div class="content">
+ <p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
+</div>
- {% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
+{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
- {% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
+{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
- {% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
+{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
- {% include variables.html type='component' %}
+{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
- </div>
-</section>
+{% include variables.html type='component' %}
projects / thirdparty / bulma.git / commitdiff
