diff --git a/CHANGELOG.md b/CHANGELOG.md
index 16a8efd..b8286e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,10 @@ This changelog follows the patterns described here: https://keepachangelog.com/e
 
 ## Unreleased
 
+## 0.1.7
+### added
+- Added field `id` to compenents missing the field.
+
 ## 0.1.6
 ### changed
 - Updates to the `Navbar` component:
diff --git a/Cargo.toml b/Cargo.toml
index 4701c76..5900727 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "ybc"
-version = "0.1.6"
+version = "0.1.7"
 description = "A Yew component library based on the Bulma CSS framework."
 authors = ["Anthony Dodd <dodd.anthonyjosiah@gmail.com>"]
 edition = "2018"
diff --git a/src/columns/mod.rs b/src/columns/mod.rs
index 9364425..6b99dd8 100644
--- a/src/columns/mod.rs
+++ b/src/columns/mod.rs
@@ -7,6 +7,8 @@ pub struct ColumnsProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Align child columns vertically.
     #[prop_or_default]
     pub vcentered: bool,
@@ -55,15 +57,15 @@ impl Component for Columns {
         if self.props.centered {
             classes.push("is-centered");
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -72,6 +74,8 @@ pub struct ColumnProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A flexbox-based responsive column.
@@ -106,8 +110,9 @@ impl Component for Column {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
diff --git a/src/components/breadcrumb.rs b/src/components/breadcrumb.rs
index 32d39c4..acc81d1 100644
--- a/src/components/breadcrumb.rs
+++ b/src/components/breadcrumb.rs
@@ -11,6 +11,8 @@ pub struct BreadcrumbProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The size of this component.
     #[prop_or_default]
     pub size: Option<BreadcrumbSize>,
@@ -59,8 +61,9 @@ impl Component for Breadcrumb {
         if let Some(separator) = &self.props.separator {
             classes.push(&separator.to_string());
         }
+        let id = &self.props.id;
         html! {
-            <nav class=classes aria-label="breadcrumbs">
+            <nav class=classes aria-label="breadcrumbs" id=id>
                 <ul>
                     {self.props.children.clone()}
                 </ul>
diff --git a/src/components/card.rs b/src/components/card.rs
index 7571e25..481991c 100644
--- a/src/components/card.rs
+++ b/src/components/card.rs
@@ -7,6 +7,8 @@ pub struct CardProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// An all-around flexible and composable component; this is the card container.
@@ -37,15 +39,15 @@ impl Component for Card {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -54,6 +56,8 @@ pub struct CardHeaderProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A container for card header content; rendered as a horizontal bar with a shadow.
@@ -84,15 +88,15 @@ impl Component for CardHeader {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <header class=classes>
+            <header class=classes id=id>
                 {self.props.children.clone()}
             </header>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -101,6 +105,8 @@ pub struct CardImageProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A fullwidth container for a responsive image.
@@ -131,15 +137,15 @@ impl Component for CardImage {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -148,6 +154,8 @@ pub struct CardContentProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A container for any other content as the body of the card.
@@ -178,15 +186,15 @@ impl Component for CardContent {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -195,6 +203,8 @@ pub struct CardFooterProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A container for card footer content; rendered as a horizontal list of controls.
@@ -225,8 +235,9 @@ impl Component for CardFooter {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <footer class=classes>
+            <footer class=classes id=id>
                 {self.props.children.clone()}
             </footer>
         }
diff --git a/src/components/dropdown.rs b/src/components/dropdown.rs
index 8203525..011bf9f 100644
--- a/src/components/dropdown.rs
+++ b/src/components/dropdown.rs
@@ -12,6 +12,8 @@ pub struct DropdownProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Make this dropdown triggerable based on hover.
     #[prop_or_default]
     pub hoverable: bool,
@@ -82,8 +84,9 @@ impl Component for Dropdown {
         } else {
             html! {}
         };
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {overlay}
                 <div class="dropdown-trigger">
                     <Button classes=self.props.button_classes.clone() onclick=opencb>
diff --git a/src/components/menu.rs b/src/components/menu.rs
index 8590b77..92b73a7 100644
--- a/src/components/menu.rs
+++ b/src/components/menu.rs
@@ -7,6 +7,8 @@ pub struct MenuProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A simple menu, for any type of vertical navigation.
@@ -37,15 +39,15 @@ impl Component for Menu {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <aside class=classes>
+            <aside class=classes id=id>
                 {self.props.children.clone()}
             </aside>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -55,6 +57,8 @@ pub struct MenuListProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A container for menu list `li` elements.
@@ -85,21 +89,23 @@ impl Component for MenuList {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <ul class=classes>
+            <ul class=classes id=id>
                 {self.props.children.clone()}
             </ul>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
 pub struct MenuLabelProps {
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The text of the label.
     #[prop_or_default]
     pub text: String,
@@ -133,8 +139,9 @@ impl Component for MenuLabel {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <p class=classes>
+            <p class=classes id=id>
                 {self.props.text.clone()}
             </p>
         }
diff --git a/src/components/message.rs b/src/components/message.rs
index aaedb0e..c536595 100644
--- a/src/components/message.rs
+++ b/src/components/message.rs
@@ -7,6 +7,8 @@ pub struct MessageProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// Colored message blocks, to emphasize part of your page.
@@ -37,15 +39,15 @@ impl Component for Message {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <article class=classes>
+            <article class=classes id=id>
                 {self.props.children.clone()}
             </article>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -54,6 +56,8 @@ pub struct MessageHeaderProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// An optional message header that can hold a title and a delete element.
@@ -84,15 +88,15 @@ impl Component for MessageHeader {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -101,6 +105,8 @@ pub struct MessageBodyProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A container for the body of a message.
@@ -131,8 +137,9 @@ impl Component for MessageBody {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
diff --git a/src/components/modal.rs b/src/components/modal.rs
index 8c12be9..d6f26e6 100644
--- a/src/components/modal.rs
+++ b/src/components/modal.rs
@@ -104,7 +104,6 @@ impl Component for Modal {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -215,7 +214,6 @@ impl Component for ModalCard {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 /// A request to close a modal instance by ID.
@@ -237,12 +235,12 @@ pub struct ModalCloseMsg(pub String);
 /// // .. snip ..
 /// fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
 ///     let bridge = ModalCloser::dispatcher();
-///     Self{link, props, bridge}
+///     Self { link, props, bridge }
 /// }
 /// ```
 ///
-/// Next, in your component's `view` method, setup a callback to handle your component's close event.
-/// ```rust
+/// Next, in your component's `view` method, setup a callback to handle your component's close
+/// event. ```rust
 /// let closer = self.link.callback(|_| ModalCloseMsg("modal-0".into()));
 /// // ... snip ...
 /// <ModalCard
@@ -271,10 +269,13 @@ pub struct ModalCloser {
 }
 
 impl Agent for ModalCloser {
-    type Reach = Context<Self>;
+    type Input = ModalCloseMsg;
     type Message = ();
-    type Input = ModalCloseMsg; // The agent receives requests to close modals by ID.
-    type Output = ModalCloseMsg; // The agent forwards the input to all registered modals.
+    // The agent receives requests to close modals by ID.
+    type Output = ModalCloseMsg;
+    type Reach = Context<Self>;
+
+    // The agent forwards the input to all registered modals.
 
     fn create(link: AgentLink<Self>) -> Self {
         Self {
diff --git a/src/components/navbar.rs b/src/components/navbar.rs
index f0968ca..b9f7cc5 100644
--- a/src/components/navbar.rs
+++ b/src/components/navbar.rs
@@ -17,6 +17,8 @@ pub struct NavbarProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Make the navbar fixed to the top or bottom of the UI.
     #[prop_or_default]
     pub fixed: Option<NavbarFixed>,
@@ -25,7 +27,8 @@ pub struct NavbarProps {
     /// [https://bulma.io/documentation/components/navbar/#transparent-navbar](https://bulma.io/documentation/components/navbar/#transparent-navbar)
     #[prop_or_default]
     pub transparent: bool,
-    /// Sets **top** and **bottom** paddings with **1rem**, **left** and **right** paddings with **2rem**.
+    /// Sets **top** and **bottom** paddings with **1rem**, **left** and **right** paddings with
+    /// **2rem**.
     ///
     /// [https://bulma.io/documentation/components/navbar/#navbar-helper-classes](https://bulma.io/documentation/components/navbar/#navbar-helper-classes)
     #[prop_or_default]
@@ -94,6 +97,7 @@ impl Component for Navbar {
         if let Some(fixed) = &self.props.fixed {
             classes.push(&fixed.to_string());
         }
+        let id = &self.props.id;
 
         // navbar-menu classes
         let mut navclasses = Classes::from("navbar-menu");
@@ -148,13 +152,13 @@ impl Component for Navbar {
 
         if self.props.padded {
             html! {
-                <nav class=classes role="navigation" aria-label="main navigation">
+                <nav class=classes id=id role="navigation" aria-label="main navigation">
                     <div class="container">{contents}</div>
                 </nav>
             }
         } else {
             html! {
-                <nav class=classes role="navigation" aria-label="main navigation">{contents}</nav>
+                <nav class=classes id=id role="navigation" aria-label="main navigation">{contents}</nav>
             }
         }
     }
@@ -175,7 +179,6 @@ pub enum NavbarFixed {
     Bottom,
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 /// The two HTML tags allowed for a navbar-item.
@@ -194,6 +197,8 @@ pub struct NavbarItemProps {
     #[prop_or_default]
     pub children: Children,
     #[prop_or_default]
+    pub id: String,
+    #[prop_or_default]
     pub classes: Option<String>,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| NavbarItemTag::Div)]
@@ -263,11 +268,12 @@ impl Component for NavbarItem {
         if self.props.active {
             classes.push("is-active");
         }
+        let id = &self.props.id;
         match self.props.tag {
             NavbarItemTag::A => {
                 html! {
                     <a
-                        class=classes
+                        class=classes id=id
                         href=self.props.href.clone().unwrap_or_default()
                         rel=self.props.rel.clone().unwrap_or_default()
                         target=self.props.target.clone().unwrap_or_default()
@@ -278,7 +284,7 @@ impl Component for NavbarItem {
             }
             NavbarItemTag::Div => {
                 html! {
-                    <div class=classes>
+                    <div class=classes id=id>
                         {self.props.children.clone()}
                     </div>
                 }
@@ -287,13 +293,14 @@ impl Component for NavbarItem {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
 pub struct NavbarDividerProps {
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// An element to display a horizontal rule in a navbar-dropdown.
@@ -324,13 +331,13 @@ impl Component for NavbarDivider {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <hr class=classes/>
+            <hr class=classes id=id/>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -340,6 +347,8 @@ pub struct NavbarDropdownProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The contents of the navbar-link used for triggering the dropdown menu.
     pub navlink: Html,
     /// Make this dropdown triggerable based on hover.
@@ -435,8 +444,9 @@ impl Component for NavbarDropdown {
         } else {
             html! {}
         };
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {overlay}
                 <a class=linkclasses onclick=opencb>{self.props.navlink.clone()}</a>
                 <div class=dropclasses>
diff --git a/src/components/pagination.rs b/src/components/pagination.rs
index 5fc5656..a2ca15d 100644
--- a/src/components/pagination.rs
+++ b/src/components/pagination.rs
@@ -12,6 +12,8 @@ pub struct PaginationProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The size of this component.
     #[prop_or_default]
     pub size: Option<Size>,
@@ -65,8 +67,9 @@ impl Component for Pagination {
         if self.props.rounded {
             classes.push("is-rounded");
         }
+        let id = &self.props.id;
         html! {
-            <nav class=classes role="navigation" aria-label="pagination">
+            <nav class=classes id=id role="navigation" aria-label="pagination">
                 {self.props.previous.clone()}
                 {self.props.next.clone()}
                 <ul class="pagination-list">
@@ -77,7 +80,6 @@ impl Component for Pagination {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -140,7 +142,6 @@ pub enum PaginationItemType {
     Previous,
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 /// A horizontal ellipsis for pagination range separators.
@@ -169,7 +170,6 @@ impl Component for PaginationEllipsis {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[cfg(feature = "router")]
diff --git a/src/components/panel.rs b/src/components/panel.rs
index 0f1a1df..4d2e90d 100644
--- a/src/components/panel.rs
+++ b/src/components/panel.rs
@@ -10,7 +10,10 @@ pub struct PanelProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
-    /// The HTML content of this panel's heading; it is automatically wrapped in a `p.panel-heading`.
+    #[prop_or_default]
+    pub id: String,
+    /// The HTML content of this panel's heading; it is automatically wrapped in a
+    /// `p.panel-heading`.
     #[prop_or_default]
     pub heading: Html,
 }
@@ -43,8 +46,9 @@ impl Component for Panel {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <nav class=classes>
+            <nav class=classes id=id>
                 <p class="panel-heading">{self.props.heading.clone()}</p>
                 {self.props.children.clone()}
             </nav>
@@ -52,7 +56,6 @@ impl Component for Panel {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -93,7 +96,6 @@ impl Component for PanelTabs {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
diff --git a/src/components/tabs.rs b/src/components/tabs.rs
index 932f50b..bc2c1d4 100644
--- a/src/components/tabs.rs
+++ b/src/components/tabs.rs
@@ -9,6 +9,8 @@ pub struct TabsProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The alignment of this component.
     #[prop_or_default]
     pub alignment: Option<Alignment>,
@@ -78,8 +80,9 @@ impl Component for Tabs {
         if self.props.fullwidth {
             classes.push("is-fullwidth");
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 <ul>
                     {self.props.children.clone()}
                 </ul>
diff --git a/src/elements/box.rs b/src/elements/box.rs
index c9f115f..df0e8fd 100644
--- a/src/elements/box.rs
+++ b/src/elements/box.rs
@@ -7,6 +7,8 @@ pub struct BoxProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A white box to contain other elements.
@@ -37,8 +39,9 @@ impl Component for Box {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
diff --git a/src/elements/button.rs b/src/elements/button.rs
index dd6f66e..fa74fd7 100644
--- a/src/elements/button.rs
+++ b/src/elements/button.rs
@@ -9,6 +9,8 @@ pub struct ButtonsProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The size for all buttons within this group.
     #[prop_or_default]
     pub size: Option<ButtonGroupSize>,
@@ -45,8 +47,9 @@ impl Component for Buttons {
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
@@ -67,7 +70,6 @@ pub enum ButtonGroupSize {
     Large,
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -76,6 +78,8 @@ pub struct ButtonProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The click handler to use for this component.
     #[prop_or_else(Callback::noop)]
     pub onclick: Callback<MouseEvent>,
@@ -124,15 +128,15 @@ impl Component for Button {
         if self.props.r#static {
             classes.push("is-static")
         }
+        let id = &self.props.id;
         html! {
-            <button class=classes onclick=self.props.onclick.clone() disabled=self.props.disabled>
+            <button class=classes id=id onclick=self.props.onclick.clone() disabled=self.props.disabled>
                 {self.props.children.clone()}
             </button>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[cfg(feature = "router")]
@@ -148,6 +152,8 @@ mod router {
         /// Html inside the component.
         #[prop_or_default]
         pub children: Children,
+        #[prop_or_default]
+        pub id: String,
         /// Classes to be added to component.
         #[prop_or_default]
         pub classes: Option<String>,
@@ -256,7 +262,6 @@ mod router {
 #[cfg(feature = "router")]
 pub use router::{ButtonAnchorRouter, ButtonRouter, ButtonRouterProps};
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -265,6 +270,8 @@ pub struct ButtonAnchorProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The `href` attribute value to use for this component.
     #[prop_or_default]
     pub href: String,
@@ -322,9 +329,11 @@ impl Component for ButtonAnchor {
         if self.props.r#static {
             classes.push("is-static")
         }
+        let id = &self.props.id;
         html! {
             <a
                 class=classes
+                id=id
                 onclick=self.props.onclick.clone()
                 href=self.props.href.clone()
                 rel=self.props.rel.clone().unwrap_or_default()
@@ -337,13 +346,14 @@ impl Component for ButtonAnchor {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
 pub struct ButtonInputSubmitProps {
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The submit handler to use for this component.
     #[prop_or_else(Callback::noop)]
     pub onsubmit: Callback<FocusEvent>,
@@ -392,19 +402,21 @@ impl Component for ButtonInputSubmit {
         if self.props.r#static {
             classes.push("is-static")
         }
+        let id = &self.props.id;
         html! {
-            <input type="submit" class=classes onsubmit=self.props.onsubmit.clone() disabled=self.props.disabled/>
+            <input type="submit" class=classes id=id onsubmit=self.props.onsubmit.clone() disabled=self.props.disabled/>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
 pub struct ButtonInputResetProps {
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The reset handler to use for this component.
     #[prop_or_else(Callback::noop)]
     pub onreset: Callback<Event>,
@@ -453,8 +465,9 @@ impl Component for ButtonInputReset {
         if self.props.r#static {
             classes.push("is-static")
         }
+        let id = &self.props.id;
         html! {
-            <input type="reset" class=classes onreset=self.props.onreset.clone() disabled=self.props.disabled/>
+            <input type="reset" class=classes id=id onreset=self.props.onreset.clone() disabled=self.props.disabled/>
         }
     }
 }
diff --git a/src/elements/content.rs b/src/elements/content.rs
index 051abff..609a2ec 100644
--- a/src/elements/content.rs
+++ b/src/elements/content.rs
@@ -9,6 +9,8 @@ pub struct ContentProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "div".into())]
     pub tag: String,
@@ -43,8 +45,9 @@ impl Component for Content {
             classes = classes.extend(extra);
         }
         let tag = self.props.tag.clone();
+        let id = &self.props.id;
         html! {
-            <@{tag} class=classes>
+            <@{tag} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }
diff --git a/src/elements/delete.rs b/src/elements/delete.rs
index f3f0987..a00f33d 100644
--- a/src/elements/delete.rs
+++ b/src/elements/delete.rs
@@ -9,6 +9,8 @@ pub struct DeleteProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "button".into())]
     pub tag: String,
@@ -46,8 +48,9 @@ impl Component for Delete {
             classes = classes.extend(extra);
         }
         let tag = self.props.tag.clone();
+        let id = &self.props.id;
         html! {
-            <@{tag} class=classes onclick=self.props.onclick.clone()>
+            <@{tag} class=classes id=id onclick=self.props.onclick.clone()>
                 {self.props.children.clone()}
             </@>
         }
diff --git a/src/elements/icon.rs b/src/elements/icon.rs
index b7ed6b5..d86e915 100644
--- a/src/elements/icon.rs
+++ b/src/elements/icon.rs
@@ -10,6 +10,8 @@ pub struct IconProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The click handler to use for this component.
     #[prop_or_else(Callback::noop)]
     pub onclick: Callback<MouseEvent>,
@@ -55,8 +57,9 @@ impl Component for Icon {
         if let Some(alignment) = &self.props.alignment {
             classes.push(&alignment.to_string());
         }
+        let id = &self.props.id;
         html! {
-            <span class=classes onclick=self.props.onclick.clone()>
+            <span class=classes id=id onclick=self.props.onclick.clone()>
                 {self.props.children.clone()}
             </span>
         }
diff --git a/src/elements/image.rs b/src/elements/image.rs
index 9ebe431..7f54b5c 100644
--- a/src/elements/image.rs
+++ b/src/elements/image.rs
@@ -8,6 +8,8 @@ pub struct ImageProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The size of this component.
     #[prop_or_default]
     pub size: Option<ImageSize>,
@@ -44,8 +46,9 @@ impl Component for Image {
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
         }
+        let id = &self.props.id;
         html! {
-            <figure class=classes>
+            <figure class=classes id=id>
                 {self.props.children.clone()}
             </figure>
         }
diff --git a/src/elements/notification.rs b/src/elements/notification.rs
index ed6cb92..422e95a 100644
--- a/src/elements/notification.rs
+++ b/src/elements/notification.rs
@@ -7,6 +7,8 @@ pub struct NotificationProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// Bold notification blocks, to alert your users of something.
@@ -37,8 +39,9 @@ impl Component for Notification {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
diff --git a/src/elements/progress.rs b/src/elements/progress.rs
index e9a5bac..2901cb4 100644
--- a/src/elements/progress.rs
+++ b/src/elements/progress.rs
@@ -7,6 +7,8 @@ use yewtil::NeqAssign;
 pub struct ProgressProps {
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The maximum amount of progress; the 100% value.
     #[prop_or_else(|| 1.0)]
     pub max: f32,
@@ -46,8 +48,9 @@ impl Component for Progress {
         let max = self.props.max.to_string();
         let value = self.props.value.to_string();
         let value_txt = html! {{format!("{}%", value)}};
+        let id = &self.props.id;
         html! {
-            <progress class=classes max=max value=value>
+            <progress class=classes id=id max=max value=value>
                 {value_txt}
             </progress>
         }
diff --git a/src/elements/table.rs b/src/elements/table.rs
index 9a3908d..8b52d7f 100644
--- a/src/elements/table.rs
+++ b/src/elements/table.rs
@@ -7,6 +7,8 @@ pub struct TableProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Add borders to all the cells.
     #[prop_or_default]
     pub bordered: bool,
@@ -70,17 +72,18 @@ impl Component for Table {
         if self.props.fullwidth {
             classes.push("is-fullwidth");
         }
+        let id = &self.props.id;
         if self.props.scrollable {
             html! {
                 <div class="table-container">
-                    <table class=classes>
+                    <table class=classes id=id>
                         {self.props.children.clone()}
                     </table>
                 </div>
             }
         } else {
             html! {
-                <table class=classes>
+                <table class=classes id=id>
                     {self.props.children.clone()}
                 </table>
             }
diff --git a/src/elements/tag.rs b/src/elements/tag.rs
index aa0b295..06782f8 100644
--- a/src/elements/tag.rs
+++ b/src/elements/tag.rs
@@ -11,6 +11,8 @@ pub struct TagProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "span".into())]
     pub tag: String,
@@ -66,15 +68,15 @@ impl Component for Tag {
             classes.push(&size.to_string());
         }
         let tag = self.props.tag.clone();
+        let id = &self.props.id;
         html! {
-            <@{tag} class=classes onclick=self.props.onclick.clone()>
+            <@{tag} class=classes id=id onclick=self.props.onclick.clone()>
                 {self.props.children.clone()}
             </@>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
diff --git a/src/elements/title.rs b/src/elements/title.rs
index eb33903..9b2348d 100644
--- a/src/elements/title.rs
+++ b/src/elements/title.rs
@@ -10,6 +10,8 @@ pub struct TitleProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "h3".into())]
     pub tag: String,
@@ -56,15 +58,15 @@ impl Component for Title {
             classes.push("is-spaced");
         }
         let tag = self.props.tag.clone();
+        let id = &self.props.id;
         html! {
-            <@{tag} class=classes>
+            <@{tag} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -73,6 +75,8 @@ pub struct SubtitleProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "h3".into())]
     pub tag: String,
@@ -113,8 +117,9 @@ impl Component for Subtitle {
             classes.push(&size.to_string());
         }
         let tag = self.props.tag.clone();
+        let id = &self.props.id;
         html! {
-            <@{tag} class=classes>
+            <@{tag} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }
diff --git a/src/form/checkbox.rs b/src/form/checkbox.rs
index 983c23c..037634a 100644
--- a/src/form/checkbox.rs
+++ b/src/form/checkbox.rs
@@ -13,6 +13,8 @@ pub struct CheckboxProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Disable this component.
     #[prop_or_default]
     pub disabled: bool,
@@ -53,8 +55,9 @@ impl Component for Checkbox {
             classes = classes.extend(extra);
         }
         let checked = self.props.checked;
+        let id = &self.props.id;
         html! {
-            <label class=classes disabled=self.props.disabled>
+            <label class=classes id=id disabled=self.props.disabled>
                 <input
                     type="checkbox"
                     checked=self.props.checked
diff --git a/src/form/control.rs b/src/form/control.rs
index 9dce548..5ea9bee 100644
--- a/src/form/control.rs
+++ b/src/form/control.rs
@@ -9,6 +9,8 @@ pub struct ControlProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "div".into())]
     pub tag: String,
@@ -49,8 +51,9 @@ impl Component for Control {
             classes.push("is-expanded");
         }
         let tag = self.props.tag.clone();
+        let id = &self.props.id;
         html! {
-            <@{tag} class=classes>
+            <@{tag} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }
diff --git a/src/form/field.rs b/src/form/field.rs
index ad1d6f7..45480be 100644
--- a/src/form/field.rs
+++ b/src/form/field.rs
@@ -8,6 +8,8 @@ pub struct FieldProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// A text label for the field.
     #[prop_or_default]
     pub label: Option<String>,
@@ -90,6 +92,7 @@ impl Component for Field {
         if self.props.multiline {
             classes.push("is-grouped-multiline");
         }
+        let id = &self.props.id;
 
         // Build the label if label content is provided.
         let label = match &self.props.label {
@@ -118,7 +121,7 @@ impl Component for Field {
         };
 
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {label}
                 {self.props.children.clone()}
                 {help}
@@ -127,7 +130,6 @@ impl Component for Field {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -136,6 +138,8 @@ pub struct FieldHorizontalProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The text label for the field.
     #[prop_or_default]
     pub label: String,
@@ -179,9 +183,10 @@ impl Component for FieldHorizontal {
         if let Some(size) = &self.props.label_size {
             labelclasses.push(&size.to_string());
         }
+        let id = &self.props.id;
 
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 <div class=labelclasses>
                     <label class="label">{self.props.label.clone()}</label>
                 </div>
diff --git a/src/form/file.rs b/src/form/file.rs
index bf4a8f5..a9bbf6b 100644
--- a/src/form/file.rs
+++ b/src/form/file.rs
@@ -25,6 +25,8 @@ pub struct FileProps {
 
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// An option to control if file names will be displayed; if a value is provided, then the
     /// `has-name` class will be added to this form element and the given value will be used as a
     /// placeholder until files are selected.
@@ -108,8 +110,9 @@ impl Component for File {
             .iter()
             .map(|file| html! {<span class="file-name">{file.name()}</span>})
             .collect::<Vec<_>>();
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 <label class="file-label">
                     <input
                         type="file"
diff --git a/src/form/input.rs b/src/form/input.rs
index e6dc9b1..6f43944 100644
--- a/src/form/input.rs
+++ b/src/form/input.rs
@@ -18,6 +18,8 @@ pub struct InputProps {
 
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The input type of this component.
     #[prop_or_else(|| InputType::Text)]
     pub r#type: InputType,
@@ -90,12 +92,14 @@ impl Component for Input {
         if self.props.r#static {
             classes.push("is-static");
         }
+        let id = &self.props.id;
         html! {
             <input
                 name=self.props.name.clone()
                 value=self.props.value.clone()
                 oninput=self.link.callback(|input: InputData| input.value)
                 class=classes
+                id=id
                 type=self.props.r#type.to_string()
                 placeholder=self.props.placeholder.clone()
                 disabled=self.props.disabled
diff --git a/src/form/radio.rs b/src/form/radio.rs
index 18516fe..ea59709 100644
--- a/src/form/radio.rs
+++ b/src/form/radio.rs
@@ -21,6 +21,8 @@ pub struct RadioProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Disable this component.
     #[prop_or_default]
     pub disabled: bool,
@@ -60,8 +62,9 @@ impl Component for Radio {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <label class=classes disabled=self.props.disabled>
+            <label class=classes id=id disabled=self.props.disabled>
                 <input
                     type="radio"
                     name=self.props.name.clone()
diff --git a/src/form/select.rs b/src/form/select.rs
index e9607da..fffa259 100644
--- a/src/form/select.rs
+++ b/src/form/select.rs
@@ -20,6 +20,8 @@ pub struct SelectProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 
     /// The size of this component.
     #[prop_or_default]
@@ -73,8 +75,9 @@ impl Component for Select {
         if self.props.loading {
             classes.push("is-loading");
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 <select
                     name=self.props.name.clone()
                     value=self.props.value.clone()
@@ -90,7 +93,6 @@ impl Component for Select {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
diff --git a/src/form/textarea.rs b/src/form/textarea.rs
index bf89915..04e686f 100644
--- a/src/form/textarea.rs
+++ b/src/form/textarea.rs
@@ -15,6 +15,8 @@ pub struct TextAreaProps {
 
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The placeholder value for this component.
     #[prop_or_default]
     pub placeholder: String,
@@ -88,12 +90,14 @@ impl Component for TextArea {
         if self.props.fixed_size {
             classes.push("has-fixed-size");
         }
+        let id = &self.props.id;
         html! {
             <textarea
                 name=self.props.name.clone()
                 value=self.props.value.clone()
                 oninput=self.link.callback(|input: InputData| input.value)
                 class=classes
+                id=id
                 rows=self.props.rows
                 placeholder=self.props.placeholder.clone()
                 disabled=self.props.disabled
diff --git a/src/layout/container.rs b/src/layout/container.rs
index 5789a88..e7577b6 100644
--- a/src/layout/container.rs
+++ b/src/layout/container.rs
@@ -7,6 +7,8 @@ pub struct ContainerProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// Add a `32px` margin to the left and right sides of the container.
     #[prop_or_default]
     pub fluid: bool,
@@ -43,8 +45,9 @@ impl Component for Container {
         if self.props.fluid {
             classes.push("is-fluid");
         }
+        let id = &self.props.id;
         html! {
-            <div class=classes>
+            <div class=classes id=id>
                 {self.props.children.clone()}
             </div>
         }
diff --git a/src/layout/footer.rs b/src/layout/footer.rs
index 4913269..7152fa9 100644
--- a/src/layout/footer.rs
+++ b/src/layout/footer.rs
@@ -7,6 +7,8 @@ pub struct FooterProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
 }
 
 /// A simple responsive footer which can include anything.
@@ -37,8 +39,9 @@ impl Component for Footer {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <footer class=classes>
+            <footer class=classes id=id>
                 {self.props.children.clone()}
             </footer>
         }
diff --git a/src/layout/hero.rs b/src/layout/hero.rs
index 9c8f32a..964a3a0 100644
--- a/src/layout/hero.rs
+++ b/src/layout/hero.rs
@@ -7,6 +7,8 @@ pub struct HeroProps {
     /// Extra classes for the hero container.
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The contents of the hero-head section.
     #[prop_or_default]
     pub head: Option<Html>,
@@ -16,8 +18,8 @@ pub struct HeroProps {
     #[prop_or_default]
     pub foot: Option<Html>,
     /// If you are using a [fixed navbar](https://bulma.io/documentation/components/navbar/#fixed-navbar),
-    /// you can use the `fixed_nav=true` modifier on the hero for it to occupy the viewport height minus
-    /// the navbar height.
+    /// you can use the `fixed_nav=true` modifier on the hero for it to occupy the viewport height
+    /// minus the navbar height.
     ///
     /// https://bulma.io/documentation/layout/hero/#fullheight-with-navbar
     #[prop_or_default]
@@ -80,8 +82,9 @@ impl Component for Hero {
         } else {
             html! {}
         };
+        let id = &self.props.id;
         html! {
-            <section class=classes>
+            <section class=classes id=id>
                 {head}
                 <div class="hero-body">{self.props.body.clone()}</div>
                 {foot}
diff --git a/src/layout/level.rs b/src/layout/level.rs
index da7cd66..4858b9f 100644
--- a/src/layout/level.rs
+++ b/src/layout/level.rs
@@ -9,6 +9,8 @@ pub struct LevelProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "nav".into())]
     pub tag: String,
@@ -42,15 +44,15 @@ impl Component for Level {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <@{self.props.tag.clone()} class=classes>
+            <@{self.props.tag.clone()} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -100,7 +102,6 @@ impl Component for LevelLeft {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -150,7 +151,6 @@ impl Component for LevelRight {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
diff --git a/src/layout/media.rs b/src/layout/media.rs
index 658a76c..f3c3440 100644
--- a/src/layout/media.rs
+++ b/src/layout/media.rs
@@ -9,6 +9,8 @@ pub struct MediaProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "div".into())]
     pub tag: String,
@@ -42,15 +44,15 @@ impl Component for Media {
         if let Some(extra) = &self.props.classes {
             classes = classes.extend(extra);
         }
+        let id = &self.props.id;
         html! {
-            <@{self.props.tag.clone()} class=classes>
+            <@{self.props.tag.clone()} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -100,7 +102,6 @@ impl Component for MediaLeft {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
@@ -150,7 +151,6 @@ impl Component for MediaRight {
     }
 }
 
-//////////////////////////////////////////////////////////////////////////////
 //////////////////////////////////////////////////////////////////////////////
 
 #[derive(Clone, Debug, Properties, PartialEq)]
diff --git a/src/layout/section.rs b/src/layout/section.rs
index c33e290..7237679 100644
--- a/src/layout/section.rs
+++ b/src/layout/section.rs
@@ -8,6 +8,8 @@ pub struct SectionProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// A size modifier to control spacing.
     #[prop_or_default]
     pub size: Option<SectionSize>,
@@ -44,8 +46,9 @@ impl Component for Section {
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
         }
+        let id = &self.props.id;
         html! {
-            <section class=classes>
+            <section class=classes id=id>
                 {self.props.children.clone()}
             </section>
         }
diff --git a/src/layout/tile.rs b/src/layout/tile.rs
index b43746a..5efb97e 100644
--- a/src/layout/tile.rs
+++ b/src/layout/tile.rs
@@ -10,6 +10,8 @@ pub struct TileProps {
     pub children: Children,
     #[prop_or_default]
     pub classes: Option<String>,
+    #[prop_or_default]
+    pub id: String,
     /// The HTML tag to use for this component.
     #[prop_or_else(|| "div".into())]
     pub tag: String,
@@ -67,8 +69,9 @@ impl Component for Tile {
         if let Some(size) = &self.props.size {
             classes.push(&size.to_string());
         }
+        let id = &self.props.id;
         html! {
-            <@{self.props.tag.clone()} class=classes>
+            <@{self.props.tag.clone()} class=classes id=id>
                 {self.props.children.clone()}
             </@>
         }